พื้นที่แท็บแทนที่จะเป็นช่องว่างแบบไม่แตก ("nbsp") หลายรายการ?

959

เป็นไปได้หรือไม่ที่จะแทรกอักขระแท็บใน HTML แทนที่จะต้องพิมพ์ สี่ครั้ง?

html 
— Roch
แหล่งที่มา
21
ฉันพบว่ามีประโยชน์ในการใช้ <PRE> เมื่อใช้แท็บ mulple เวลาในจุดเริ่มต้นของบรรทัด (สำหรับอินสแตนซ์เมื่อ qouting รหัส C)
— Guy Kovel
TABตัวอักษร ... จะทำอะไร?
— Michel de Ruiter
คุณสามารถกำหนดแท็กของคุณเอง<tab>จากนั้นใช้jQueryในreadyฟังก์ชั่นเพื่อแทนที่หรือรองด้วยจำนวนช่องว่างที่ต้องการ
— Khaled.K
หากคุณต้องการแท็บจริงๆให้ลองwhite-space
— Buksy
6
FYI - ถ้าสแตติก 4x &nbsp;(หรืออันเดียว&emsp;) ไม่ตัดมันและคุณต้องการให้เรียงแถวไปยังคอลัมน์ "4 เว้น" ถัดไปตามที่แท็บอาจทำ (ซึ่งบางครั้งอาจหมายถึง 0 หรือ 1 หรือ 2 จริงหรือ 3 ช่องว่างเพื่อจัดแถว) .. ตัวอย่างเช่น .. โดยปกติแล้วมีผู้แก้ไขข้อความบางส่วน .. น่าเสียดายที่คุณไม่สามารถใช้ HTML ... โดยไม่ต้อง<table>s ... และใช้ช่องว่างจำนวนหนึ่งเพื่อพยายามแฮ็คมัน ... จะต้องใช้ฟอนต์คงที่ .... ฉันคิดว่าปัญหาส่วนใหญ่อยู่ระหว่างความต้องการฟอนต์คงที่และ HTML นั้นชอบที่จะลบ white space
— Pimp Trizkit

คำตอบ:

582

มันใช้งาน CSS ได้ง่ายกว่ามาก ลองpadding-left:5emหรือmargin-left:5emตามความเหมาะสมแทน

— Alohci
แหล่งที่มา
13
@Alhci IMHO padding ด้วย CSS นั้นไม่ดีเท่าไหร่ตั้งแต่เมื่อคุณจะซูมข้อความในเบราว์เซอร์ขนาดของข้อความจะเพิ่มขึ้น แต่ไม่ใช่ AFAIK สำหรับการขยาย
— AlexV
16
@AlexV - หากคุณใช้emเป็นมิติอย่างที่ฉันทำมันควรขยายด้วยขนาดตัวอักษร แม้ว่าคุณจะไม่ทำเช่นนั้นมันก็จะขึ้นอยู่กับลักษณะของกลไกการซูมที่ใช้
— Alohci
2
@DavidThielen - HTML 3 ซึ่งองค์ประกอบ TAB ปรากฏขึ้นนั้นไม่ใช่การเริ่มต้นกับผู้ผลิตเบราว์เซอร์และองค์ประกอบ TAB ไม่เคยถูกนำมาใช้ HTML 3.2 นั้นถูกสร้างขึ้นมาซึ่งค่อนข้างง่ายกว่าและถูกนำมาใช้แทน
— Alohci
2
@Eoin - แน่นอน คือสิ่งที่คุณต้องการจริงๆในกรณีผู้ที่มีแท็บหยุด แต่นั่นไม่ใช่สิ่งที่ OP ถาม OP กำลังขอการแทนที่ช่องว่างแบบไม่ต่อเนื่องหลาย ๆ ชุดซึ่งไม่เรียงแถวกัน CSS มีtab-sizeคุณสมบัติซึ่งเป็นสิ่งที่คุณต้องการจริงๆ แต่การสนับสนุนเบราว์เซอร์ของมันนั้นผิดปกติ ความล้มเหลวนั้นเค้าโครงตารางหรือ flexbox เป็นทางออกที่ดีที่สุดของคุณ
— Alohci
5
สิ่งนี้ไม่ตอบคำถาม คำตอบด้านล่างโดย kristian พูดถึงปัญหาที่ผู้ใช้โพสต์เกี่ยวกับ
— Pranavan Maru
1265

ขึ้นอยู่กับชุดอักขระที่คุณต้องการใช้

ไม่มีแท็บนิติบุคคลที่กำหนดไว้ในมาตรฐาน ISO-8859-1 HTML เป็น - แต่มีคู่ของตัวอักษรช่องว่างอื่น ๆ กว่า&nbsp;เช่น&thinsp;, และ&ensp;&emsp;

ใน ASCII &#09;เป็นแท็บ

นี่คือรายการที่สมบูรณ์ของหน่วยงาน HTML และการอภิปรายการใช้งานของช่องว่างในวิกิพีเดีย

— Kristian
แหล่งที่มา
2
ความแตกต่างระหว่าง&ensp;และ&emsp;คืออะไร? ฉันทดสอบทั้งคู่มีพื้นที่เท่ากัน .. !
— Shafizadeh
3
ซอสลับในการทำ & # 09; แสดงเป็นพื้นที่แบบแท็บใน HTML คือข้อกำหนด CSS ของ white-space <p style = "display: inline-block; white-space: pre-wrap;"> & # 09; ¡ Muy bien! การแท็บใช้ได้กับฉันในภาษาสเปนและอังกฤษ </p> พื้นที่สีขาว: pre; ยังใช้งานได้ คุณสามารถใช้แท็บ "แท็บ" <แท็บ /> พร้อมกับ CSS :: ก่อนแท็บตัวเลือก :: ก่อน {เนื้อหา: "\ 0009";} แต่มันไม่แสดงเป็นแท็บเมื่อไฮไลต์ตัดและวาง .
— Jules Bartow
3
@Shafizadeh จากข้อกำหนด W3 : en space คือครึ่งหนึ่งของขนาดพอยต์และ em space เท่ากับขนาดพอยต์ของฟอนต์ปัจจุบัน &emsp;ใหญ่กว่าเล็กน้อย ฉันเห็นความแตกต่างใน Chrome 64 และ FireFox 58
— Dmitry
กำลังมองหาสิ่งนี้เมื่อสร้างแบบสอบถาม concat () ขนาดใหญ่ใน MySQL เพื่อใช้ใน Crystal Report ASCII (& # 09;) ทำงานได้อย่างสมบูรณ์แบบ!
— Mike D Wakelyn
นี่คือสิ่งที่ฉันกำลังมองหา ฉันเว้นวรรคชื่อหนังสือบางเล่มโดยใช้บรรทัดสุดท้ายแสดงว่ามีการกำหนดแอตทริบิวต์ แต่ฉันไม่ต้องการให้บางรายการแยกออกจากกัน แท็ก &; ป้องกันไม่ให้
— Alex Banman
237

ไม่Tabเป็นเพียงช่องว่างเท่าที่เกี่ยวข้องกับ HTML ผมขอแนะนำให้em พื้นที่แทนซึ่งมีขนาดใหญ่นี้ (→ | | ←) ... โดยทั่วไปจะมี 4 ช่องว่างกว้าง - &emsp;และมีการป้อนข้อมูลเป็น

คุณยังอาจจะสามารถที่จะได้รับไปกับการใช้ Unicode ตัวอักษร ("  ") สำหรับมันถ้าคุณโชคดี

— Will Robertson
แหล่งที่มา
195

และ emsp; คือคำตอบ

อย่างไรก็ตามสิ่งเหล่านี้จะไม่สามารถใช้งานได้อย่างที่คุณคาดหวังหากคุณคุ้นเคยกับการใช้แท็บแนวนอนในโปรแกรมประมวลผลคำเช่น Word, Wordperfect, Open Office, Wordworth เป็นต้นความกว้างคงที่และไม่สามารถปรับแต่งได้

CSS ช่วยให้คุณควบคุมได้ดียิ่งขึ้นและเป็นทางเลือกอื่นจนกว่า W3C จะให้ทางออกที่เป็นทางการ

ตัวอย่าง:

padding-left:4em

..หรือ..

margin-left:4em

.. ตามความเหมาะสม

ขึ้นอยู่กับชุดอักขระที่คุณต้องการใช้

คุณสามารถตั้งค่าแท็กแท็บและใช้แท็กเหล่านั้นคล้ายกับวิธีที่คุณจะใช้แท็ก h

<style>
    tab1 { padding-left: 4em; }
    tab2 { padding-left: 8em; }
    tab3 { padding-left: 12em; }
    tab4 { padding-left: 16em; }
    tab5 { padding-left: 20em; }
    tab6 { padding-left: 24em; }
    tab7 { padding-left: 28em; }
    tab8 { padding-left: 32em; }
    tab9 { padding-left: 36em; }
    tab10 { padding-left: 40em; }
    tab11 { padding-left: 44em; }
    tab12 { padding-left: 48em; }
    tab13 { padding-left: 52em; }
    tab14 { padding-left: 56em; }
    tab15 { padding-left: 60em; }
    tab16 { padding-left: 64em; }
</style>

... และใช้งานได้ตามต้องการ:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tabulation example</title>

        <style type="text/css">
            dummydeclaration { padding-left: 4em; } /* Firefox ignores first declaration for some reason */
            tab1 { padding-left: 4em; }
            tab2 { padding-left: 8em; }
            tab3 { padding-left: 12em; }
            tab4 { padding-left: 16em; }
            tab5 { padding-left: 20em; }
            tab6 { padding-left: 24em; }
            tab7 { padding-left: 28em; }
            tab8 { padding-left: 32em; }
            tab9 { padding-left: 36em; }
            tab10 { padding-left: 40em; }
            tab11 { padding-left: 44em; }
            tab12 { padding-left: 48em; }
            tab13 { padding-left: 52em; }
            tab14 { padding-left: 56em; }
            tab15 { padding-left: 60em; }
            tab16 { padding-left: 64em; }

        </style>

    </head>

    <body>
        <p>Non tabulated text</p>

        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab2>Tabulated text</tab2></p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p>Non tabulated text</p>
        <p><tab3>Tabulated text</tab3></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab4>Tabulated text</tab4></p>
        <p><tab1>Tabulated text</tab1></p>
        <p><tab2>Tabulated text</tab2></p>

    </body>

</html>
ขยายตัวอย่างข้อมูล

เรียกใช้ตัวอย่างข้อมูลด้านบนเพื่อดูตัวอย่างที่มองเห็นได้

การอภิปรายพิเศษ

ไม่มีเอนทิตีการจัดเรียงแบบแนวนอนที่กำหนดไว้ใน ISO-8859-1 HTML อย่างไรก็ตามมีอักขระช่องว่างสีขาวอื่น ๆ ที่มีอยู่มากกว่าแบบปกติ&nbspตัวอย่างเช่น &thinsp;, และดังกล่าวข้างต้น&ensp;&emsp;

นอกจากนี้ยังเป็นมูลค่าการกล่าวขวัญว่าใน ASCII และ Unicode &#09;เป็นตารางแนวนอน

— Wonderworker
แหล่งที่มา
2
สิ่งนี้ไม่ถูกต้องXHTMLตามตัวตรวจสอบ
— Buksy
นั่นเป็นความจริงเพียงครึ่งเดียวเนื่องจาก & emsp; เป็นมาร์กอัป W3C ที่ถูกต้อง แต่คุณอ้างถึงตัวอย่าง CSS ที่ดีอย่างชัดเจน ในกรณีนี้เราใช้ประโยชน์จากแท็กที่กำหนดเองซึ่งเป็นมาร์กอัปใหม่และไม่ใช่ส่วนหนึ่งของชุด W3C เครื่องมือตรวจสอบ W3C นั้นเข้มงวดกับระดับของการทำเครื่องหมายแท็กที่กำหนดเองเป็นข้อผิดพลาดเสมอ ขึ้นอยู่กับคุณซึ่งสำคัญกว่า ถึงเวลาที่เราจะได้รับการสอดแทรกอย่างเป็นทางการของแท็บที่เพิ่มเข้ามาในชุดเครื่องหมาย Html หวังว่านี่จะช่วยได้
— WonderWorker
2
ฉันใช้กรณีนี้สำหรับส่วนหัว Swing JTable ที่มีค่า String และตัวอักษรประเภทลูกศร HTML ซึ่งฉันต้องการตัวละครนี้เป็นตัวคั่น ใช้งานได้ดี! ขอบคุณ!
— Blake Neal
2
"แปลกไม่มีแท็บแนวนอนใน html" ไม่ใช่สิ่งที่แปลกเพราะการจัดรูปแบบถูกย้ายออกจาก html และ css อย่างสม่ำเสมอและแท็บไม่ได้เป็นองค์ประกอบภาพเท่านั้นองค์ประกอบการจัดรูปแบบ แต่คำตอบที่ดีและอธิบายได้ดี
— MikeT
75

ด้านล่างนี้เป็น 3 วิธีที่แตกต่างกันโดย HTML เพื่อแทรกพื้นที่ว่าง

  1. พิมพ์&nbsp;เพื่อเพิ่มช่องว่างเดียว
  2. พิมพ์&ensp;เพื่อเพิ่ม 2 ช่องว่าง
  3. พิมพ์&emsp;เพื่อเพิ่ม 4 ช่องว่าง
— sanjeev51
แหล่งที่มา
3
เพียงเพิ่ม;พวกเขาด้วย ชอบ&nbsp;
— Amio.io
2
คำตอบนี้จริงตอบคำถาม มันเป็นวิธีที่โง่คำตอบ CSS ถูกทำเครื่องหมายเป็นคำตอบ
— มณี
@Mani คำถามที่ถูกถามในปี 2009 และคำตอบที่ได้รับการยอมรับคือจาก 2009 คำตอบนี้ถูกเพิ่มเข้ามาในปี 2018 .. เมื่อคุณมองดูอย่างนั้นมันก็ไม่ได้โง่
— ᴛʜᴇᴘᴀᴛᴇʟ
@ ᴛʜᴇᴘᴀᴛᴇʟลืมว่าจริง ๆ แล้วตอบคำถามหรือไม่ แต่สิ่งที่ถูกทำเครื่องหมายไม่ตอบถูกต้องคือจุดที่ฉันพยายามทำ
— มณี
นี่คือคำตอบที่เหมาะสมจริง ขอบคุณ!
— Ariel Monaco
67

ลอง &emsp;

มันเทียบเท่ากับสี่&nbsp;s

— Abhishek Goel
แหล่งที่มา
ในความเป็นจริงไม่ได้เป็นคำตอบที่ถูกต้องเป็นw3.org/MarkUp/html3/specialchars.html เห็นได้ชัดว่ามันขึ้นอยู่กับชนิดของแบบอักษรที่ใช้นอกจากนี้ em space จะเท่ากับขนาดพอยต์ของแบบอักษรปัจจุบันและ em space นั้นเทียบเท่ากับอักขระช่องว่างสองตัว
— le0diaz
52

ไม่มีวิธีง่าย ๆ ในการแทรกหลายช่องว่างภายใน (หรือตรงกลาง) ของย่อหน้า สิ่งที่แนะนำให้คุณใช้ CSS นั้นหายไป คุณอาจไม่ได้พยายามเยื้องย่อหน้าจากด้านข้าง แต่ในความเป็นจริงแล้วพยายามวางช่องว่างเพิ่มเติมในจุดเฉพาะของมัน

ในสาระสำคัญในกรณีนี้ช่องว่างกลายเป็นเนื้อหาและไม่ใช่สไตล์ ฉันไม่รู้ว่าทำไมคนจำนวนมากไม่เห็นสิ่งนั้น ฉันเดาว่าความแข็งแกร่งที่พวกเขาพยายามบังคับให้แยกสไตล์และกฎเนื้อหา (HTML ถูกออกแบบมาเพื่อทำทั้งสองอย่างตั้งแต่ต้น - ไม่มีอะไรผิดปกติกับการกำหนดสไตล์ขององค์ประกอบที่ไม่ซ้ำกันในบางครั้งโดยใช้แท็กที่เหมาะสมโดยไม่ต้องใช้จ่ายมากขึ้น เวลาในการสร้าง CSS สไตล์ชีทและไม่มีอะไรที่ไม่สามารถอ่านได้เมื่อมันถูกใช้ในการกลั่นกรองนอกจากนี้ยังมีบางสิ่งที่จะกล่าวว่าสามารถทำอะไรได้อย่างรวดเร็ว) แปลว่าพวกเขาสามารถพิจารณาได้เฉพาะอักขระช่องว่างเท่านั้น สไตล์และการเยื้อง

และเมื่อไม่มีวิธีที่สง่างามในการแทรกช่องว่างโดยไม่ต้องพึ่งพา&emsp;และ&nbsp;แท็กฉันจะยืนยันว่าโค้ดที่ได้นั้นไม่สามารถอ่านได้มากไปกว่าที่มีแท็กที่มีชื่อเหมาะสมซึ่งจะทำให้คุณสามารถแทรกช่องว่างจำนวนมากได้อย่างรวดเร็ว (หรือถ้าคุณรู้ว่าไม่มีการใช้ช่องว่างในตอนแรก)

ตามที่ได้กล่าวไว้ข้างต้นแล้วทางออกที่ดีที่สุดของคุณคือการใช้&emsp;เพื่อแทรกในตำแหน่งที่ถูกต้อง

— GonzoKnight
แหล่งที่มา
1
HTML ไม่ได้ถูกออกแบบมาตั้งแต่ต้นเพื่อให้มีสไตล์ที่กำหนดเอง
— Markus Unterwaditzer
รักในประเด็นของคุณว่าการเยื้องไม่ใช่สิ่งที่คนต้องการเสมอไป!
— โปรแกรม Redwolf
46

ควรใช้แท็กล่วงหน้า ก่อนข้อความกำหนดแท็ก preformatted

<pre>
 This is
preformatted text.
It preserves      both spaces

and line breaks.

</pre>

รู้เพิ่มเติมเกี่ยวกับแท็กล่วงหน้าที่ลิงค์นี้

— ศรีกันตถาวราภู
แหล่งที่มา
1
@HuzaifaSaifuddin คุณหมายถึงอะไร <pre>เป็นมาตรฐานใน HTML5 ที่มีพฤติกรรมเช่นเดียวกับใน HTML4
— สุมิตร
ฉันขอโทษฉันไม่ทราบว่าฉันเขียนว่า .. ฉันเห็นด้วยกับสิ่งที่คุณพูด .. ขอข้อมูลผิด
— Huzaifa Saifuddin
ฉันกำลังจัดรูปแบบผลลัพธ์ที่จะวางลงในสเปรดชีตและสิ่งนี้ทำให้ฉันสามารถแทรก \ t อักขระเพื่อทำแท็บ คำตอบของฉันคือแน่นอน ไปได้ดี
— Craig Brett
1
นี่คือตัวเลือกที่ดีที่สุด IMHO นอกจากนี้เราสามารถใช้การกำหนดสไตล์ใน <pre> ดังนั้นเราจึงสามารถใช้แบบอักษร 'monospace' ที่ถูกต้องได้ ตัวอย่าง: pre {font-family: "Lucida Console", Monaco, monospace; ขนาดตัวอักษร: 90%; }
— reverpie
41

ฉันเจอสิ่งนี้ในขณะที่ค้นหาวิธีการและหาวิธีการของฉันที่ดูเหมือนว่าจะทำงานได้อย่างง่ายดายสำหรับสิ่งที่ต้องการ ฉันเพิ่งเริ่มโพสต์ที่นี่ดังนั้นฉันหวังว่ามันจะใช้ได้ ... แต่มีใน CSS:

span.tab{
    padding: 0 80px; /* Or desired space*/
}

จากนั้นใน HTML ของคุณนี่คือ "แท็บยาว" ของคุณในประโยคกลางอย่างที่ฉันต้องการ:

<span class="tab"></span>

บันทึกจากจำนวน&nbsp;หรือ&emsp;ที่คุณต้องการ

หวังว่านี่จะช่วยใครซักคนไชโย!

— ปล้น
แหล่งที่มา
3
สิ่งนี้จะเพิ่ม 80px ไปทางซ้ายและ 80px ทางด้านขวาของspanแท็กไม่ใช่แท็บทั้งหมด
— mcont
ยังคงเป็นการตอบสนองที่ชาญฉลาดเพราะคุณเพิ่มมาร์กอัปเพียงเล็กน้อยในขณะที่อนุญาตให้ CSS จัดแต่งทรงผม
— ใบแจ้งหนี้
19

&emsp;, &ensp;, &#8195;หรือ&#8194;สามารถนำมาใช้

W3 พูดว่า ... 

The character entities &ensp; and &emsp; denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.

อ่านเพิ่มเติมได้ที่ W3.org สำหรับ HTML3

อ่านเพิ่มเติมได้ที่ W3.org สำหรับ HTML4

ยิ่งกว่านั้นที่Wikipedia

— shyammakwana.me
แหล่งที่มา
9

หากช่องว่างจะกลายเป็นว่าที่สำคัญมันอาจจะดีกว่าที่จะใช้ข้อความ preformatted และ <pre> แท็ก

— pavium
แหล่งที่มา
สหกรณ์ไม่ได้เป็นเช่นนั้นโดยเฉพาะอย่างยิ่งเกี่ยวกับช่องว่างเพียงแค่ถามเกี่ยวกับลัดสำหรับหลาย&nbsp;'s การเรียกใช้<pre>แท็กจะสร้างงานพิเศษมากมาย
— isomorphismes
เพื่อหลีกเลี่ยงแบบอักษร monospace ใช้ css "white-space: pre-wrap"
— hultqvist
ช่องว่างไม่ใช่that importantสิ่ง มันเป็นความจริงของชีวิต
— โปรแกรม Redwolf
9

หากคุณกำลังมองหาการเยื้องประโยคแรกในย่อหน้าคุณสามารถทำได้ด้วยเคล็ดลับ CSS:

p:first-letter {
    margin-left: 5em;
}
— peirix
แหล่งที่มา
ใช่. มันก็ใช้ได้เหมือนกัน เพียงจำไว้ว่าให้ใส่:first-letterถ้าจุดคือการเยื้องเพียงประโยคแรก
— peirix
9

แท็ก <tab> ไม่เคยทำให้เป็นเบราว์เซอร์แม้จะถูกนำมาใช้ใน HTML3 ฉันมักจะคิดว่ามันน่าเสียดายจริง ๆ เพราะชีวิตจะง่ายกว่ามากในหลาย ๆ สถานการณ์ถ้าเรามีให้เรา แต่คุณสามารถแก้ไขได้โดยง่ายเพื่อให้แท็ก <tab> ปลอม เพิ่มสิ่งต่อไปนี้ในส่วนหัวของ HTML หรืออย่างอื่น (ไม่มีแท็กสไตล์) ลงใน CSS ของคุณ:

<style>
    tab { padding-left: 4em; }
</style>

จากนั้นเมื่อคุณต้องการแท็บในเอกสารให้ใส่ <tab> มันไม่ได้เป็นแท็บที่แท้จริงเพราะมันไม่ตรงกับเครื่องหมายของแท็บ แต่ใช้ได้กับความต้องการส่วนใหญ่โดยไม่ต้องไปไหนมาไหนกับเอนทิตี้ของตัวละครหรือช่วงที่มีเงอะงะ มันทำให้ง่ายต่อการตรวจสอบแหล่งที่มาของคุณและแน่นอนการจัดรูปแบบสิ่งง่าย ๆ ที่คุณไม่ต้องการไปยุ่งกับตารางหรืออื่น ๆ "โซลูชัน" ที่ซับซ้อนมากขึ้น

ข้อดีอย่างหนึ่งของโซลูชันนี้คือคุณสามารถค้นหา / แทนที่เอกสารข้อความอย่างรวดเร็วเพื่อแทนที่แท็บทั้งหมดด้วยแท็ก <tab>

คุณอาจสามารถกำหนดตำแหน่งแท็บสัมบูรณ์จริง ๆ ได้จากนั้นใช้แท็บที่เหมาะสม (เช่น <tab2> หรือ <tab5> หรืออะไรก็ตาม) ที่จำเป็น แต่ฉันไม่พบวิธีที่จะทำโดยไม่ต้องเยื้องบรรทัดถัดไป .

— user1388236
แหล่งที่มา
7

คุณสามารถใช้ตารางและใช้แอตทริบิวต์กับครั้งแรกwidth<td>

รหัส:

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

ผลลัพธ์

Content1       Content2
Content3       Content4
— mangkokorix
แหล่งที่มา
ขอบคุณ !! นี่เป็นทางออกที่ดีที่สุดและทั่วไปที่สุดสำหรับสถานการณ์ที่ CSS เป็นไปไม่ได้
— John Henckel
6

ฉันใช้ช่วงเวลาในการจัดแต่งบรรทัด ฉันต้องทำเช่นนี้เพราะฉันกำลังประมวลผลข้อความธรรมดาและต้องแทนที่ \ t ด้วยช่องว่าง 4 อัน (appx) ฉันไม่สามารถใช้งาน&nbsp;ต่อไปในกระบวนการที่พวกเขาถูกตีความเพื่อให้การทำเครื่องหมายสุดท้ายมีช่องว่างที่ไม่ใช่เนื้อหา

HTML:

<span style="padding: 0 40px">&nbsp;</span>

ฉันใช้มันในฟังก์ชั่น PHP ดังนี้:

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);
— กอร์ดี้
แหล่งที่มา
6

หากคุณต้องการเพียงหนึ่งแท็บต่อไปนี้ใช้งานได้สำหรับฉัน

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

ด้วย HTML เช่น:

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p>

คุณสามารถเพิ่ม "แท็บ" เพิ่มเติมโดยเพิ่มสไตล์ "แท็บ" เพิ่มเติมและเปลี่ยน HTML เช่น:

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

ด้วย HTML เช่น:

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>
— StrangeDucks
แหล่งที่มา
4

หากคุณใช้ CSS ฉันจะแนะนำสิ่งต่อไปนี้:

p:first-letter { text-indent:1em; }

สิ่งนี้จะเยื้องบรรทัดแรกเหมือนในสิ่งพิมพ์ดั้งเดิม

— Slevin
แหล่งที่มา
4

มี CSS ง่าย ๆ สำหรับมัน:

white-space: pre;

มันเก็บช่องว่างที่คุณเพิ่มใน HTML แทนที่จะรวมเข้าด้วยกัน

— Avi
แหล่งที่มา
3 
<span style="margin-left:64px"></span>

พิจารณาอย่างนี้: หนึ่งแท็บเท่ากับ 64 พิกเซล นี่คือพื้นที่ที่เราสามารถให้ได้ด้วย CSS

— Mateen
แหล่งที่มา
3

เราสามารถใช้ style = "white-space: pre" แบบนี้:

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

พื้นที่ว่างภายในเต็มไปด้วยแท็บจำนวนแท็บขึ้นอยู่กับข้อความ

มันจะมีลักษณะเช่นนี้:

Text    : value
Text2   : value2
Text32  : value32
— Esgi Dendyanri
แหล่งที่มา
3

รหัส CSS ที่เหมาะสมที่สุดที่ควรใช้ควรเป็นการรวมกันของคุณสมบัติ "display" และ "min-width" ...

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.
— Olumide
แหล่งที่มา
2

ถ้าหากเราต้องการพื้นที่ว่างที่ยาวในตอนต้นของหนึ่งบรรทัดเพียงย่อหน้าเดียวทั้งหมดนี่อาจเป็นทางออก:

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

หากการเขียนมากเกินไปหรือต้องการแท็บดังกล่าวในหลาย ๆ ที่คุณสามารถทำได้

<span class='tab'>&nbsp;</span>

จากนั้นรวมสิ่งนี้ลงใน CSS:

span.tab {display:inline-block;height:1em;width:4em;}
— Evgeny Savelev
แหล่งที่มา
2

ฉันใช้รายการที่ไม่มีสัญลักษณ์แสดงหัวข้อย่อยเพื่อให้ปรากฏ "แท็บ" (มันเป็นสิ่งที่ฉันทำเมื่อใช้ MS Word)

ในไฟล์ CSS:

.tab {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

และในไฟล์ HTML ใช้รายการที่ไม่ได้เรียงลำดับ:

This is normal text
<ul class="tab">
    <li>This is indented text</li>
</ul>

ความงามของโซลูชันนี้คือคุณสามารถสร้างการเยื้องเพิ่มเติมโดยใช้รายการซ้อน

Noob ที่นี่พูดคุยดังนั้นหากมีข้อผิดพลาดใด ๆ โปรดแสดงความคิดเห็น

— funct7
แหล่งที่มา
(x) HTML ควรระบุเนื้อหาของเอกสารว่าจะแสดงอย่างไรควรจัดการโดย CSS มีเหตุผลหลายประการที่ทำให้การวางหน้าเว็บโดยใช้ตารางไม่ควรใช้กับข้อมูลที่ไม่ใช่ตาราง
— Nielsvh
1

เราใช้คลาสการขยายพื้นที่ที่กำหนดเอง

<span class='space'></span>

รวมคลาสของช่องว่างใน CSS

.space 
{
   margin-left:45px;
}
— rashedcs
แหล่งที่มา
1
เช่นเดียวกับคำตอบของ Alohci โปรดใช้em/ remการวัดเพื่ออนุญาตการซูมข้อความของเบราว์เซอร์
— Charlie Harding
0

การใช้ CSS และแนวปฏิบัติที่ดีที่สุดการสร้างแบบไดนามิกของเมนูที่ซ้อนและเยื้องจะเป็นดังนี้:

  1. สร้างสไตล์สำหรับแต่ละการซ้อนเช่น indent1, indent2 ฯลฯ โดยแต่ละอันจะระบุระยะขอบซ้ายของตัวเอง โครงสร้างเว็บไซต์ไม่ค่อยควรมีการทำรังเกินกว่าสามระดับ
  2. ใช้ตัวแปรแบบคงที่ (จำนวนเต็ม) ภายในฟังก์ชันเรียกซ้ำตัวเองเพื่อติดตามการเรียกซ้ำ
  3. สำหรับแต่ละลูปให้ต่อท้ายหมายเลขลูปกับคำindentโดยใช้การเขียนสคริปต์ฝั่งเซิร์ฟเวอร์เช่น PHP หรือ ASP เพื่อให้เมนูเหล่านี้ถูกจัดรูปแบบอย่างเหมาะสมโดย CSS

อีกวิธีหนึ่งคือห่วงผ่านตัวแปรคงที่จะเพิ่มระยะห่างใช้หลาย&nbsp;หรือ<pre>แท็กหรือตัวละครอื่น ๆ ตามความเหมาะสม

จากการทดสอบอักขระแท็บแนวนอน&#09;ฉันพบว่ามันไม่ทำงานแทนอักขระหลายตัว&nbsp;ในสถานการณ์ที่ฉันอธิบาย คุณอาจมีผลลัพธ์ที่แตกต่างกัน

— Ro Mc
แหล่งที่มา
0

นี่เป็นวิธีแก้ปัญหาที่น่าเกลียด แต่คุณก็ทำได้

var tab = '&nbsp;&nbsp;&nbsp;&nbsp;';

จากนั้นใช้ตัวแปรแท็บในสตริงของคุณ

— Aunghus McGovern
แหล่งที่มา
0

แท็ก "pre" เท่านั้น:

<pre>Name:      Waleed Hasees
Age:        33y
Address:    Palestine / Jein</pre>

คุณสามารถใช้คลาส CSS ใดก็ได้บนแท็กนี้

— Yanni
แหล่งที่มา
0

ฉันอยากจะแนะนำ:

/* In your CSS code: */
pre
{
    display:inline;
}

<!-- And then, in your HTML code: -->

<pre>    This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>
— yoav barnea
แหล่งที่มา
0 
<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

ตรวจสอบให้แน่ใจว่ารหัสสีตรงกับพื้นหลังที่ px แปรผันตามความยาวที่ต้องการสำหรับแท็บ

จากนั้นเพิ่มข้อความของคุณหลังจาก <t>. </ t>

ระยะเวลาถูกใช้เป็นผู้ถือพื้นที่และพิมพ์ได้ง่ายขึ้น แต่ '& # 160;' สามารถใช้แทนช่วงเวลาได้เช่นกันดังนั้นการเข้ารหัสสีจึงไม่มีความเกี่ยวข้อง

<head>
<style> t {letter-spacing:35px;} </style>
</head>

<t>&#160;</t>

สิ่งนี้มีประโยชน์เป็นส่วนใหญ่สำหรับการแสดงย่อหน้าของข้อความแม้ว่าอาจมีประโยชน์ในส่วนอื่น ๆ ของสคริปต์

— Eric A. Tuttle
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.