如何获得制表符?


123

在HTML中,制表符没有字符,但是我对为什么可以在此处复制并粘贴一个标签感到困惑。(您看不到它的完整宽度,但是如果单击以编辑我的问题,您将看到该字符。)如果我可以复制和粘贴制表符,则应该有一个可以编码为html的unicode等效项。 。我知道它不存在,但这是我从未能理解的谜。

所以我的问题是:即使我可以复制和粘贴标签,为什么标签也没有Unicode字符?


6
这是您的制表符:“”。如果您需要其他字符,请给我发短信!我也有空格,破折号和希腊字母!
madhead

在Unix上:Ctrl + Shift + U,然后9为缩进字符。
neverMind9

与问题或答案相比,StackOverflow使得注释文本更加严厉。“,”和“” 粘贴的TAB字符,用各种方式引用。
MarkHu

Answers:


165

确保标签的实体:

	

(选项卡为ASCII字符9,或Unicode U + 0009。)

但是,就像文字标签(您在文本编辑器中键入的标签一样,HTML解析器将所有标签字符视为空白,并折叠到一个空格中,除了<pre>块内的空格外,文字标签将在一个空格中显示为8个空格。等宽字体。


1
很有意思,但是如果它是一个Unicode字符,那么html根本不应该对其进行更改(折叠),对吗?
Abbey Graebner 2012年

2
Unicode没有自己的制表符。U + 0009与您通过按键获得的制表符相同Tab。(我认为您可能会将HTML实体与Unicode字符集混淆。)
josh3736 2012年

8
通常,您可以使用&#9; 在任何CSS样式为white-space:pre;的元素中 就像在jsfiddle.net/cancerbero_sgx/sp269/3中一样
Cancerbero 2013年


48

将其放在<pre></pre>标签之间,然后使用此字符&#9;

没有<pre></pre>标签就无法使用


4
好的,这很棒,我试图单独使用&#9;,但是没有用。感谢您的提及<pre>
Abbey Graebner 2012年

1
很好的建议。为什么会这样表现呢?
pkanane

1
<pre>标记定义了预格式化的文本,标记内的任何文本位置都会保留空格,换行符,制表符等。它通常以固定宽度的字体类型显示,例如Courier
Raymund,2015年

2
您可以将任何html标记与white-space: pre-wrap;white-space: pre;
Petr Hurtak

16

发布另一个替代方法以使其更完整。当我尝试基于“ pre”的答案时,他们也添加了额外的垂直换行符。

每个制表符都可以转换为不需要换行的序列不间断空格。

"&nbsp;&nbsp;&nbsp;&nbsp;" 

不建议在页面内重复/广泛使用此功能。div边距/填充方法看起来更干净。


5
如果将制表符用作将文本对齐到制表符右边的工具(其中左侧的非固定宽度字体文本不相等),则转换为nbsp字符将无法解决问题。
史蒂夫·米德利

4

我使用<span style="display: inline-block; width: 2ch;">&#9;</span>两个字符的宽标签。


这与制表符不同,只是添加空格,因此没有任何列。
萨拉米


1

如前所述,出于效率原因,将顺序空间合并为浏览器实际显示的一个空间。记住HTML中的ML代表什么。这是一种标记语言,旨在控制文本的显示方式。

尽管如此,您仍可以假装浏览器使用“制表符”选项卡,因为TAB所做的只是在其前面加上4个空格,而使用CSS则很容易。要么像...

 <div style="padding-left:4.00em;">Indenented text </div>

或作为样式表中的常规类

.tabbed {padding-left:4.00em;}

然后,HTML可能看起来像

<p>regular paragraph regular paragraph regular paragraph</p>
<p class="tabbed">Indented text Indented text Indented text</p>
<p>regular paragraph regular paragraph regular paragraph</p>

1
选项卡不是那样的。制表符将内容对齐,-在一行上可能会添加3个空格,在另一行上可能会添加4个空格。从概念上讲,它将光标移动到下一个制表符停止位置。
BrainSlugs83 '19
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.