วิธีแทรกช่องว่าง / แท็บในข้อความโดยใช้ HTML / CSS

วิธีที่เป็นไปได้:

<pre> ... </pre>

หรือ

style="white-space:pre"

มีอะไรอีกไหม

ในการแทรกtab spaceระหว่างสองคำ / ประโยคที่ฉันมักจะใช้

  และ  

ในกรณีที่ความกว้าง / ความสูงของพื้นที่เกินกว่าที่ ฉันมักจะใช้:

สำหรับตัวเว้นวรรคแนวนอน:

<span style="display:inline-block; width: YOURWIDTH;"></span>

สำหรับตัวเว้นวรรคแนวตั้ง:

<span style="display:block; height: YOURHEIGHT;"></span>

คุณสามารถใช้ สำหรับช่องว่าง<สำหรับ<(น้อยกว่าจำนวนนิติบุคคล<) และ>สำหรับ>(มากกว่าจำนวนนิติบุคคล>)

รายการที่สมบูรณ์สามารถพบได้ที่หน่วยงาน HTML

ลอง ดู

ตามเอกสารของตัวละครพิเศษ :

เอนทิตีของอักขระ และ แสดงถึงช่องว่าง en และพื้นที่ em ตามลำดับโดยที่พื้นที่ en คือครึ่งหนึ่งของขนาดพอยต์และช่องว่าง em เท่ากับขนาดพอยต์ของแบบอักษรปัจจุบัน สำหรับฟอนต์พิทช์คงที่เอเจนต์ผู้ใช้สามารถใช้พื้นที่ en เทียบเท่ากับอักขระเว้นวรรคและเว้นวรรค em เท่ากับเทียบเท่ากับอักขระเว้นวรรคสองตัว

ฉันชอบที่จะใช้สิ่งนี้:

ใน CSS ของคุณ:

.tab { 
       display:inline-block; 
       margin-left: 40px; 
}

ใน HTML ของคุณ:

<p>Some Text <span class="tab">Tabbed Text</span></p>

ประเภทของSpacesHTML

สร้างสี่ช่องว่างระหว่างข้อความ -  

สร้างสองช่องว่างระหว่างข้อความ -  

สร้างช่องว่างปกติระหว่างข้อความ -  

สร้างพื้นที่แคบ ๆ (คล้ายกับพื้นที่ปกติ แต่แตกต่างกันเล็กน้อย - "&thinsp";

ระยะห่างระหว่างประโยค - "</br>"

ลิงค์นี้อาจช่วยคุณได้ ตรวจสอบ [ https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

<p style="text-indent: 5em;">
The first line of this paragraph will be indented about five characters, similar to a tabbed indent.
</p>

บรรทัดแรกของย่อหน้านี้จะถูกเยื้องประมาณห้าอักขระคล้ายกับการเยื้องแบบแท็บ

ดูวิธีใช้ HTML และ CSS เพื่อสร้างแท็บและระยะห่างสำหรับข้อมูลเพิ่มเติม

<span style="padding-left:68px;"></span>

คุณยังสามารถใช้:

padding-left
padding-right
padding-top
padding-bottom

ไปไกลกว่า @Ivar และกำหนดแท็กที่กำหนดเองของฉันเองอย่างนั้น ... สำหรับฉัน 'แท็บ' ง่ายต่อการจดจำและพิมพ์

tab {
    display: inline-block;
    margin-left: 40px;
}

และการนำ HTML มาใช้ ...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

และภาพหน้าจอของฉัน ...

<table>หากคุณกำลังถามหาแท็บไปที่สิ่งที่จัดในสายบางอย่างที่คุณสามารถใช้

<tr> ... </tr>วางในแต่ละบรรทัด และแต่ละองค์ประกอบภายในบรรทัด<td> ... </td>นั้น และแน่นอนคุณสามารถควบคุมการขยายของเซลล์แต่ละตารางเพื่อปรับช่องว่างระหว่างเซลล์เหล่านั้น

นี่จะทำให้พวกมันอยู่ในแนวเดียวกันและพวกมันจะดูดีมาก :)

หรือเรียกอีกอย่างว่าพื้นที่คงที่หรือพื้นที่ว่างพื้นที่ไม่แตก (NBSP) ใช้ในการเขียนโปรแกรมและการประมวลผลคำเพื่อสร้างช่องว่างในบรรทัดที่ไม่สามารถแยกด้วยการตัดคำ

ด้วย HTML  ช่วยให้คุณสร้างช่องว่างหลายช่องที่มองเห็นได้บนหน้าเว็บและไม่เพียง แต่ในซอร์สโค้ดเท่านั้น

พื้นที่สีขาว? คุณไม่สามารถใช้การขยายได้ใช่ไหม นั่นคือความคิด นั่นคือวิธีที่คุณสามารถเพิ่ม "พื้นที่ว่าง" รอบองค์ประกอบของคุณ ดังนั้นคุณสามารถใช้แท็ก CSS ต่อไปนี้:

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;

คุณสามารถใช้รหัสนี้ เพื่อเพิ่มช่องว่างในเนื้อหา HTML สำหรับพื้นที่แท็บให้ใช้ 5 ครั้งขึ้นไป

ตรวจสอบตัวอย่างได้ที่นี่: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

ใช้ tab-sizeCSS

ในการแทรกสัญลักษณ์แท็บ (หากคีย์แท็บมาตรฐานให้เลื่อนเคอร์เซอร์) กดAlt+ 0+ 0+9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

ที่ฉันต้องการ:

*{-moz-tab-size: 1; tab-size: 1;}

ดูที่ข้อมูลโค้ดหรือตัวอย่างพบอย่างรวดเร็วที่แท็บขนาด

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}

<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>

สิ่งนี้ใช้ได้กับฉัน:

ใน CSS ของฉันฉันมี:

tab0  { position:absolute;left:25px;  }
tab1  { position:absolute;left:50px;  }
tab2  { position:absolute;left:75px;  }
tab3  { position:absolute;left:100px; }
tab4  { position:absolute;left:125px; }
tab5  { position:absolute;left:150px; }
tab6  { position:absolute;left:175px; }
tab7  { position:absolute;left:200px; }
tab8  { position:absolute;left:225px; }
tab9  { position:absolute;left:250px; }
tab10 { position:absolute;left:275px; }

จากนั้นใน HTML ฉันใช้แท็บของฉัน:

Dog Food <tab3> :$30
Milk <tab3> :$3
Pizza Kit <tab3> :$5
Mt Dew <tab3> :$1.75

คำตอบของ user8657661นั้นใกล้เคียงกับความต้องการของฉันมากที่สุด (ในหลาย ๆ บรรทัด) อย่างไรก็ตามฉันไม่สามารถรับโค้ดตัวอย่างให้ทำงานได้ตามที่ระบุไว้ แต่ฉันต้องการเปลี่ยนมันดังนี้:

<html>
    <head>
        <style>
            .tab9 {position:absolute;left:150px; }
        </style>
    </head>

    <body>
        Dog Food: <span class="tab9"> $30</span><br/>
        Milk of Magnesia:<span class="tab9"> $30</span><br/>
        Pizza Kit:<span class="tab9"> $5</span><br/>
        Mt Dew <span class="tab9"> $1.75</span><br/>
    </body>
</html>

หากคุณจำเป็นต้องจัดชิดขวาตัวเลขที่คุณสามารถเปลี่ยนleft:150pxไปright:150pxแต่คุณจะต้องเปลี่ยนจำนวนขึ้นอยู่กับความกว้างของหน้าจอ (เขียนเป็นตัวเลขที่จะเป็น 150 พิกเซลจากขอบด้านขวาของหน้าจอ)

คุณสามารถดำเนินการผ่านการขยายเช่น<span style="padding-left: 20px;">คุณสามารถตรวจสอบวิธีการเพิ่มเติมที่นี่ที่ - พื้นที่ว่างใน html

นี่คือข้อความ "แท็บ" (คัดลอกและวาง): ""

มันอาจปรากฏแตกต่างกันหรือไม่เต็มแท็บเนื่องจากข้อ จำกัด ของคำตอบของเว็บไซต์นี้