Cách chèn khoảng trắng / tab trong văn bản bằng HTML / CSS

Những cách có thể:

<pre> ... </pre>

hoặc là

style="white-space:pre"

Còn gì nữa không?

Để chèn tab spacegiữa hai từ / câu tôi thường sử dụng

  và  

Trong trường hợp chiều rộng / chiều cao của không gian vượt quá  tôi thường sử dụng:

Đối với miếng đệm ngang:

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

Đối với miếng đệm dọc:

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

Bạn có thể sử dụng  cho khoảng trắng, <cho <(ít hơn, số thực thể <) và >cho >(lớn hơn, số thực thể >).

Một danh sách đầy đủ có thể được tìm thấy tại các Thực thể HTML .

Hãy thử  .

Theo tài liệu tại Nhân vật đặc biệt :

Các thực thể ký tự  và  biểu thị một không gian en và một không gian em tương ứng, trong đó một không gian en bằng một nửa kích thước điểm và một không gian em bằng với kích thước điểm của phông chữ hiện tại. Đối với phông chữ cố định, tác nhân người dùng có thể coi không gian en tương đương với ký tự khoảng trắng và không gian em tương đương với hai ký tự khoảng trắng.

Tôi thích sử dụng cái này:

Trong CSS của bạn:

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

Trong HTML của bạn:

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

Các loại Spacestrong HTML

Tạo bốn khoảng trắng giữa văn bản-  

Tạo hai khoảng trắng giữa văn bản -  

Tạo một không gian thường xuyên giữa các văn bản -  

tạo ra một không gian hẹp (tương tự như không gian thông thường nhưng khác biệt một chút - "&thinsp";

khoảng cách giữa các câu - "</br>"

Liên kết này có thể giúp bạn. Hãy xem [ https://apse-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>

Dòng đầu tiên của đoạn này sẽ được thụt vào khoảng năm ký tự, tương tự như thụt lề theo thẻ.

Xem Cách sử dụng HTML và CSS để tạo tab và khoảng cách để biết thêm thông tin.

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

Bạn cũng có thể dùng:

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

Đi một bước xa hơn @Ivar và tạo kiểu thẻ tùy chỉnh của riêng tôi như vậy ... Đối với tôi, 'tab' dễ nhớ và gõ hơn.

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

Và việc triển khai HTML ...

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

Và ảnh chụp màn hình của tôi ...

Nếu bạn đang yêu cầu các tab để căn chỉnh công cụ trong một số dòng, bạn có thể sử dụng <table>.

Đưa từng dòng vào <tr> ... </tr>. Và từng yếu tố bên trong dòng đó trong <td> ... </td>. Và tất nhiên, bạn luôn có thể điều khiển phần đệm của từng ô của bảng để điều chỉnh không gian giữa chúng.

Điều này sẽ làm cho chúng phù hợp và chúng sẽ trông khá đẹp :)

Hoặc được gọi là không gian cố định hoặc không gian cứng, không gian không phá vỡ (NBSP) được sử dụng trong lập trình và xử lý văn bản để tạo khoảng trắng trong một dòng không thể bị phá vỡ bằng cách bọc từ.

Với HTML,  cho phép bạn tạo nhiều khoảng trắng hiển thị trên một trang web và không chỉ trong mã nguồn.

Khoảng trắng? Bạn không thể sử dụng đệm sao? Đó là một ý tưởng. Đó là cách bạn có thể thêm một số "vùng trống" xung quanh thành phần của mình. Vì vậy, bạn có thể sử dụng các thẻ CSS sau:

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

Bạn có thể sử dụng mã này  để thêm khoảng trắng trong nội dung HTML. Đối với không gian tab, sử dụng nó 5 lần trở lên.

Kiểm tra một ví dụ ở đây: https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

Sử dụng CSS tiêu chuẩn tab-size.

Để chèn ký hiệu tab (nếu phím tab tiêu chuẩn, di chuyển con trỏ) nhấn Alt+ 0+ 0+9

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

Sở thích của tôi:

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

Nhìn vào đoạn trích hoặc ví dụ tìm thấy nhanh ở kích thước tab .

.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>

Điều này làm việc cho tôi:

Trong CSS của tôi, tôi có:

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; }

Sau đó, trong HTML tôi chỉ sử dụng các tab của mình:

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

Câu trả lời của user8657661 là gần nhất với nhu cầu của tôi (sắp xếp mọi thứ qua nhiều dòng). Tuy nhiên, tôi không thể lấy mã ví dụ để hoạt động như được cung cấp, nhưng tôi cần thay đổi nó như sau:

<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>

Nếu bạn cần các số được căn phải, bạn có thể thay đổi left:150pxthành right:150px, nhưng bạn sẽ cần thay đổi số dựa trên chiều rộng của màn hình (như đã viết, các số sẽ là 150 pixel từ cạnh phải của màn hình).

Bạn có thể thực hiện thông qua phần đệm như thế nào <span style="padding-left: 20px;">, bạn có thể kiểm tra nhiều cách hơn tại đây - khoảng trống trong html

Đây là văn bản "Tab" (sao chép và dán): ""

Nó có thể xuất hiện khác nhau hoặc không phải là một tab đầy đủ vì giới hạn câu trả lời của trang web này.