制表符是否可以代替多个不间断空格（"nbsp"）？

Question

制表符是否可以代替多个不间断空格（"nbsp"）？

html

1049

在HTML中，是否可以插入制表符而不是必须键入四个 字符？

- Roch

24

我发现在行首多次使用制表符（例如引用C代码时）时，使用<PRE>很有帮助。 - Guy Kovel

一个 TAB 字符是用来做什么的？ - Michel de Ruiter

你可以定义自己的标签 <tab>，然后在 ready 函数中使用 jQuery 来替换或填充它们所需的等效空格数量。 - Khaled.K

如果你真的需要选项卡，不妨尝试使用 white-space。 - Buksy

9

如果一个静态的4x (或单个的&emsp;)不能满足你的需求，并且你想要它们对齐到下一个"4个空格"的列，就像制表符所做的那样(这意味着有时实际上需要0、1、2或3个空格来对齐)...比如，在某些文本编辑器中...不幸的是，在HTML中你不能这样做...除非使用<table>元素，而且尝试使用一些空格来进行hack将需要使用固定字体...我认为大部分问题都在于需要固定字体以及HTML喜欢删除空白字符之间。 - Pimp Trizkit

显示剩余2条评论

37个回答

627

使用CSS会更加简洁。尝试使用适当的padding-left:5em或margin-left:5em代替。

- Alohci

15

在我看来，使用CSS填充不是很好，因为当你在浏览器中放大文本时，文本大小会增加，但填充大小不会增加。据我所知。 - AlexV

17

如果你像我一样使用 em 作为维度，它应该会随着文本大小的改变而扩展。即使你不这样做，它也取决于所使用的缩放机制的性质。 - Alohci

3

@Eoin - 确实。即在这些情况下您真正需要的是制表位。但这不是 OP 所询问的。OP 询问的是多个连续不间断空格的替代方法，这也无法使行对齐。CSS 有一个 tab-size 属性，这才是您真正需要的，但它在浏览器上的支持并不稳定。如果失败，table-layout 或者 flexbox 是您最好的选择。 - Alohci

4

这不是正确的回答。你没有回答是否有制表符！ - FFirmenich

11

这并没有回答这个问题。Kristian下面的回答解决了用户提出的问题。 - Pranavan Maru

显示剩余10条评论

261

不，就HTML而言，Tab只是whitespace。我建议使用em-space，它的大小为(→| |←) ...通常4个空格宽，输入为&emsp;。

如果你很幸运，甚至可以使用Unicode character(" ")来代替。

以下是Unicode中的Space characters and “zero-width spaces”列表。

- Will Robertson

205

&emsp;就是答案。

然而，如果您习惯于在文字处理器（如Word、Wordperfect、Open Office、Wordworth等）中使用水平制表符，则它们的功能可能不如您期望的那样。它们是固定宽度的，不能自定义。

CSS为您提供了更大的控制权，并提供了一种替代方案，直到W3C提供官方解决方案。

示例：

padding-left:4em

..或者..

margin-left:4em

..适当地使用

这取决于您想使用哪个字符集。

您可以设置一些标签并将它们用于类似于如何使用标题标签的方式。

<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 之外，还有其他一些可用的空格字符，例如： 、&ensp; 和前面提到的 &emsp;。

值得一提的是，在 ASCII 和 Unicode 中，	 是水平制表符。

- WonderWorker

3

根据**W3验证器**，这不是有效的XHTML。 - Buksy

这只是一半正确，因为是有效的 W3C 标记。但你显然是在指有利的 CSS 示例。在这种情况下，我们正在使用自定义标签，这些标签是新的标记而不是 W3C 集的一部分。W3C 验证器始终将自定义标签标记为错误，因此它非常严格。重要的是由你来决定。是时候在 Html 标记集中添加一个体面的官方制表符实现了。希望这可以帮到你。 - WonderWorker

2

我在一个 Swing JTable 表头的案例中使用了这个方法，其中包含一个字符串值和一个 HTML 箭头类型字符，我需要将该字符作为分隔符。非常好用！谢谢！ - Blake Neal

3

奇怪的是，在HTML中没有水平制表符。这并不奇怪，因为格式化一直在不断地从HTML向CSS转移，而制表符不是一个视觉元素，而只是一个格式化元素。虽然答案很好，并且解释得很清楚。 - MikeT

@Buksy 这个问题没有标记为XHTML，所以它不需要是有效的XHTML。 - TylerH

127

以下是HTML提供的三种不同方式来插入空格：

输入   来添加一个空格。
输入 &ensp; 来添加两个空格。
输入 &emsp; 来添加四个空格。

- sanjeev51

3

也将它们加上分号;，例如 。 - Amio.io

@Mani 这个问题是在2009年提出的，被接受的答案也是来自2009年。这个答案是在2018年添加的。从这个角度看，它并不愚蠢。 - ᴛʜᴇᴘᴀᴛᴇʟ

@ᴛʜᴇᴘᴀᴛᴇʟ 不知道这是否真正回答了问题，但我想表达的是被标记的答案并没有准确回答问题。 - Mani

我认为 &emsp 是一个可打断的空格字符，而 &nbsp 则是一个不可打断的空格字符，对吗？因此，就视觉空间而言，它们可能是等同的，但是在换行方面并不相同。 - Joshua

71

尝试 &emsp;

它等同于四个 。

- Abhishek Goel

实际上并不是正确答案，因为 https://www.w3.org/MarkUp/html3/specialchars.html 明确表示它取决于所使用的字体类型，而且 em 空格等于当前字体的点大小，并且 em 空格相当于两个空格字符。 - le0diaz

我相信 &emsp 是一个可打断的空格字符，而 &nbsp 是一个不可打断的空格字符，对吗？因此，就视觉空间而言，它们只在这方面是等效的，但在换行方面并不相同。 - Joshua

57

在一个段落内（或者它的中间）插入多个空格并没有简单的方法。那些建议你使用 CSS 的人忽略了关键点。有时候你并不是想从侧面缩进一个段落，而是想要在一个特定的位置添加额外的空格。

实际上，在这种情况下，这些空格就成为了内容而不是样式。很多人为什么没有看到这一点我也不知道。我猜是因为他们试图过于严格地强制执行样式和内容分离的规则（HTML 最初就是既设计用来处理样式也可以处理内容 - 偶尔使用适当的标签定义唯一元素的样式，而不必花费大量的时间进行 CSS 样式表的创建是完全没有问题的，这在适度使用时也绝对不会导致代码难以阅读。快速完成某件事情也有其优势）。这也解释了为什么他们只把空白字符视为仅用于样式和缩进。

当没有优雅的方式可以插入空格而不需要依赖 &emsp; 和   标签时，我认为所得到的代码比如果存在一个恰当命名的标签，可以让你快速地插入大量空格（或者干脆避免在第一次使用时无意中消耗了空格）更加难以阅读。

然而，正如上述所说，最好的方法是使用 &emsp; 在正确的位置插入。

- GonzoKnight

1

HTML 最初并不是为了自定义样式而设计的。 - Markus Unterwaditzer

49

最好使用 pre 标签。 pre 标签定义预格式化文本。

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

and line breaks.

</pre>

了解有关 pre 标签的更多信息，请访问此链接

- Srikanth Muttavarapu

44

CSS 中需要这样写：

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

那么在您的HTML中，将这个作为您“长制表符”，就像我所需要的一样，插入到句子中间：

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

节省需要使用的   或 &emsp; 的数量。

- Rob

3

иҝҷе°ҶеңЁspanж Үзӯҫзҡ„е·Ұдҫ§е’ҢеҸідҫ§еҗ„ж·»еҠ 80еғҸзҙ пјҢдёҚе®Ңе…ЁжҳҜдёҖдёӘеҲ¶иЎЁз¬ҰгҖӮ - mcont

只添加一小段标记，就可以让CSS完成样式设计，这仍然是一个聪明的响应。 - invot

我同意@mcont的观点，如果需要一个左侧80像素的标签，则将其更改为padding: 0 0 0 80px。然而，混合使用像素、ems和ens是一种不好的做法。 - Canned Man

21

&emsp;、&ensp;、 或 可用。

W3表示...

字符实体和分别表示半个点大小的en空格和等于当前字体点大小的em空格。

HTML3文档请访问W3.org了解更多

HTML4文档请访问W3.org了解更多

更多信息请访问维基百科

- shyammakwana.me

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kristian · Accepted Answer

1326

这取决于你想要使用哪个字符集。

在ISO-8859-1 HTML中，没有定义tab实体，但是有一些空格字符可以使用，例如 、&ensp;和&emsp;，而不是 。

在ASCII中，	表示tab。

这里提供了HTML实体的完整列表，这篇维基百科文章讨论了空格的使用方法。

- kristian

3

&ensp; 和 &emsp; 有什么区别？我测试了一下，它们都产生了完全相同的空格..！ - Shafizadeh

9

在HTML中使显示为制表符的秘诀是使用white-space CSS定义。white-space:pre-wrap;也可以使用。您还可以使用“tab”标签<tab/>以及CSS ::before选择器tab::before {content:"\0009";}，但在突出显示、剪切和粘贴时无法显示为制表符。下面的句子示例演示了如何在页面中实现制表符： <p style="display:inline-block;white-space:pre-wrap;"> ¡Muy bien! Tabbing works for me in Spanish & English </p>。 - Jules Bartow

5

根据W3规范，英寸空格(en space)是字号的一半，九分之一个中文字符宽度；魔法空格(em space)与当前字体的点大小相等。而&emsp;略微更大一些。在Chrome 64和FireFox 58中可以看到这种差异。 - Dmitry