如何使用HTML/CSS在文本中插入空格/製表符？

112

<pre> ... </pre>

或

style="white-space:pre"

還有別的嗎？

來源

2012-03-20 Yeseanul

你的意思是「標籤」或「標籤」？ – user123444555621 2012-03-20 23:53:41

[HTML中的空白處]（http://webdesign.about.com/od/styleproperties/p/blspwhitespace.htm），[HTML中的標籤]（http://webdesign.about.com/od/intermediatetutorials/qt /tiphtmltab.htm），[間隔你的HTML]（http://webdesign.about.com/od/beginningtutorials/a/aabg101399a.htm），當然' ' – 2012-03-20 18:40:16

有沒有相當於' '但是製作標籤？ – 2016-01-29 15:35:53

您可以使用> 的空間，<爲<（小於實體數量<）和>（大於，實體號>）。

的完整列表可以在這個地址上找到：http://www.w3schools.com/html/html_entities.asp

來源

2012-03-20 18:39:21

當然：我忘了' '。 – Yeseanul 2012-03-20 18:48:56

在箱子，其中所述空間的寬度/高度超出 我通常使用

用於水平間隔：

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

用於垂直間隔物：

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

來源

2012-03-20 20:53:25 Japol

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

本段的第一行縮進約5個字符，類似於標籤縮進

更多信息

來源

2013-05-14 17:33:04 sammyukavi

<span style="padding-left:68px;"></span> 見here你也可以使用填充左填充右 padding-top padding-bottom

來源

2014-06-23 05:35:08 Ron1925

要在兩個單詞/句子之間插入tab space我通常使用

&emsp;和&ensp;

來源

2015-02-04 00:56:57 Giri

我喜歡用這樣的：

在你的CSS：

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

在HTML：

<p>Some Text <span id="tab">Some Tabbed Looking Text</span></p>

來源

2015-06-29 04:30:53

這是一個很好的答案。但我只想說，使用CSS類而不是id（它意味着用'.tab'和'id =「tab」'by'class =「tab」''替換'#tab'）會更好，因爲如果我們在同一個文檔中多次使用它，我們可能會有未定義的行爲。看，例如，[這個問題]（https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme）。 – 2017-07-10 09:38:06

如果你問的選項卡對齊你可以使用的某些行中的內容<table>

把該行裏面<tr> ... </tr>

每一行和每一元素<td> ... </td>

，當然你可以隨時掌控每個表格單元格的填充來調整它們之間的空間

這將使他們一致，他們會看起來很不錯:)

來源

2016-04-25 23:58:19 Argento

應使用表格來表示表格數據，而不是格式。在90年代經常用於格式化的表格中，因爲HTML中的限制以及使用在瀏覽器中一致工作的樣式編寫HTML的挫敗感。今天它被認爲是反模式。 – 2017-03-28 18:01:49

我看到你的觀點，這可能是一些老派的解決方案，但我曾經有過一次他的問題，並且使用表格對我來說很完美 – Argento 2017-03-30 06:39:35

是的，但是你可以使用表格樣式（與現代CSS）而不會混淆語義含義！顯示：表格等 – Julix 2017-05-30 19:38:18

嘗試&emsp;

按照該文檔在https://www.w3.org/MarkUp/html3/specialchars.html

的字符實體&ensp;和&emsp;表示半角空格和全角空間表示，其中的連接空間是一半的點尺寸和EM 空間等於點的大小的當前字體。對於固定間距字體，用戶代理可以將en空間視爲等同於A 空格字符，而em空格等同於兩個空格個字符。

來源

2016-05-05 07:34:17

這爲我工作：在我的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

來源

2017-10-31 12:42:17 user8657661

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像素。）

來源

2017-12-16 22:00:36

白色空間，你不能只使用填充？這是一個想法，對不起，如果我沒有得到這個正確的，但這是你如何可以添加一些「空白區域」圍繞你的元素。所以你可以使用下面的CSS標籤：

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

再次抱歉，如果這不是你以後的。

來源

2018-01-11 04:10:19

如何使用HTML/CSS在文本中插入空格/製表符？

回答

相關問題