制表符空格而不是多个不间断空格（“nbsp”）？答案

【问题标题】：Tab space instead of multiple non-breaking spaces ("nbsp")?制表符空格而不是多个不间断空格（“nbsp”）？
【发布时间】：2010-12-06 23:56:53
【问题描述】：

是否可以在 HTML 中插入制表符而不必输入四次&nbsp;？

【问题讨论】：

我发现在行首使用制表符多时间时使用

 很有帮助（用于引用 C 代码时的实例）

一个TAB 字符...做什么？
您可以定义自己的标签<tab>，然后在ready 函数上使用jQuery 来替换或填充所需数量的等效空格。
如果你真的需要标签，试试white-space
仅供参考 - 如果静态 4x&nbsp;（或单个 &emsp;）没有切割它，并且您希望它们排列到下一个“4 间隔”列，就像选项卡一样, （这意味着有时它实际上需要 0 或 1 或 2 或 3 个空格来排列）.. 例如.. 比如说，一些文本编辑器.. 不幸的是，你不能在 HTML 中......没有<table> s...而且，使用一些空格来尝试破解它...将需要固定字体...。我认为大多数问题在于需要固定字体和HTML喜欢删除白色空间。

标签： html

【解决方案1】：

这取决于您要使用的字符集。

在 ISO-8859-1 HTML 中没有定义选项卡实体 - 但除了 &nbsp; 之外还有几个空格字符，例如 &thinsp;、&ensp; 和 &emsp;。

在 ASCII 中，&#09; 是一个制表符。

Here 是 HTML 实体和 a useful discussion of whitespace on Wikipedia 的完整列表。

【讨论】：

&ensp; 和&emsp; 有什么区别？我测试了，它们的空间完全一样..！
制作的秘诀在 HTML 中显示为选项卡式空间是空白 CSS 定义。
¡ Tabbing 对我有用西班牙语和英语
。空白：pre；也有效。您还可以使用“标签”标签以及 CSS ::before Selector tab::before {content:"\0009";} 但在突出显示、剪切和粘贴时它不会显示为标签.
@Shafizadeh From W3 specs：en 空格是磅值的一半，em 空格等于当前字体的磅值。 &emsp; 略大。我可以看到 Chrome 64 和 FireFox 58 的区别。
在 MySQL 中构建大型 concat() 查询以用于 Crystal Report 时正在寻找这个。 ASCII ( ) 完美地完成了这项工作！
这就是我要找的。我使用最后一行 justify 属性分隔了一些标题，但我不希望其中一些分开。阻止了这一点。

【解决方案2】：

使用 CSS 更简洁。请酌情尝试padding-left:5em 或margin-left:5em。

【讨论】：

@Alohci 恕我直言，用 CSS 填充不是很好，因为当您在浏览器中缩放文本时，文本大小会增加，但填充 AFAIK 不会增加。
@AlexV - 如果你像我一样使用em 作为维度，它应该随着文本大小而扩展。即使您不这样做，这也取决于所使用的缩放机制的性质。
@DavidThielen - HTML 3，其中出现 TAB 元素对浏览器制造商来说是一个非首创，并且 TAB 元素从未实现。取而代之的是，HTML 3.2 被创建了，它更简单一些，并且被实现了。
@Eoin - 确实如此。 IE。在这些情况下，您真正想要的是制表符 stops。但这不是OP所要求的。 OP 要求替换多个连续的不间断空格，这也不会将行排成一行。 CSS 有一个 tab-size 属性，这是您真正想要的，但它的浏览器支持一直不稳定。如果做不到这一点，table-layout 或者 flexbox 是你最好的选择。
这没有回答问题。克里斯蒂安的以下答案解决了用户发布的问题

【解决方案3】：

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

如果幸运的话，您甚至可以使用 Unicode character (" ") 来解决这个问题。

这是Space characters and “zero-width spaces” in Unicode 的列表。

【讨论】：

【解决方案4】：

就是答案。

但是，如果您习惯在文字处理器（例如Word、Wordperfect、Open Office、Wordworth等。它们是固定宽度，不能自定义。

在 W3C 提供官方解决方案之前，CSS 为您提供了更大的控制权并提供了替代方案。

示例：

padding-left:4em

..或..

margin-left:4em

..酌情

这取决于您要使用的字符集。

您可以设置一些选项卡标签并像使用 h 标签一样使用它们。

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

运行上面的 sn-p 以查看可视化示例。

额外讨论

ISO-8859-1 HTML 中没有定义水平制表实体，但是除了通常的&nbsp 之外，还有一些其他可用的空白字符，例如； &thinsp;、&ensp; 和前面提到的&emsp;。

还值得一提的是，在 ASCII 和 Unicode 中，&#09; 是一个水平制表。

【讨论】：

根据W3 validator，这不是一个有效的XHTML
这只是对了一半，因为是真正有效的 W3C 标记。但是您显然指的是有利的 CSS 示例。在这种情况下，我们使用自定义标签，这是新的标记，而不是 W3C 集合的一部分。 W3C 验证器对始终将自定义标签标记为错误的程度非常严格。由你决定哪个更重要。是时候让我们对添加到 Html 标记集的选项卡进行正式的正式实施了。希望这会有所帮助。
我在一个带有字符串值和 HTML 箭头类型字符的 Swing JTable 标题的案例中使用了这个，我需要这个字符作为分隔符。效果很好！谢谢！
"奇怪的是，在 html 中没有水平选项卡" 并没有那么奇怪，因为格式一直从 html 转移到 css，并且选项卡不是视觉元素，只是格式化元素，但很好的答案和很好的解释

【解决方案5】：

以下是 HTML 提供的 3 种不同的插入空格的方法

键入&nbsp; 以添加一个空格。
输入 &ensp; 以添加 2 个空格。
键入&emsp; 以添加4 个空格。

【讨论】：

只需将; 也添加到他们。喜欢&nbsp;
这个答案实际上回答了这个问题。如何将 CSS 答案标记为答案是愚蠢的。
@Mani 这个问题是在 2009 年提出的，接受的答案是从 2009 年开始的。这个答案是在 2018 年添加的。当你这样看时，它并不愚蠢。
@ᴛʜᴇᴘᴀᴛᴇʟ 忘记这是否真的回答了这个问题，但标记的那个没有准确回答是我想要表达的观点。
这是实际正确的答案。谢谢！

【解决方案6】：

试试&emsp;

相当于四个&nbsp;s。

【讨论】：

其实不是w3.org/MarkUp/html3/specialchars.html的正确答案。明确表示这取决于所使用的字体类型，em space 也等于当前字体的磅值，em space 相当于两个空格字符
我相信 &emsp 是一个中断的空白字符，而 &nbsp 是一个非中断的空白字符，对吗？因此，这些仅就视觉空间而言是等效的，但与换行无关。

【解决方案7】：

确实没有任何简单的方法可以在段落的内部（或中间）插入多个空格。那些建议你使用 CSS 的人没有抓住重点。您可能并不总是尝试从一侧缩进段落，但实际上，您会尝试在段落的特定位置放置额外的空格。

本质上，在这种情况下，空格变成内容，而不是样式。我不知道为什么这么多人看不到这一点。我猜他们试图强制分离样式和内容规则的刚性（HTML从一开始就被设计为两者兼而有之 - 偶尔使用适当的标签定义 unique 元素的样式并没有错无需花费更多时间来创建 CSS 样式表，并且在适度使用时绝对没有什么不可读的。还有一些话要说是能够快速做某事。）转化为他们只能考虑的方式空白字符仅用于样式和缩进。

如果没有优雅的方法来插入空格而不必依赖&emsp; 和&nbsp; 标签，我认为生成的代码会变得比如果有一个适当命名的标签更不可读您可以快速插入大量空格（或者，如果一开始就没有不必要地消耗空格）。

尽管如此，如上所述，您最好的选择是使用&emsp; 在正确的位置插入。

【讨论】：

HTML 从一开始就没有设计成自定义样式。
喜欢你关于缩进并不总是人们想要的观点！

【解决方案8】：

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

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

and line breaks.

</pre>

在this link了解更多关于pre标签的信息

【讨论】：

@HuzaifaSaifuddin 你是什么意思？ <pre> 是 standardised in HTML5，与 HTML4 中的行为相同。
对不起，我不知道是我写的。我同意你的说法。抱歉信息有误
我正在格式化输出以粘贴到电子表格中，这允许我插入 \t 字符来执行制表符。绝对是我的答案。进展顺利。

这是恕我直言的最佳选择。此外，我们可以在

 上应用样式定义，因此如果需要，我们可以使用正确的“等宽”字体。示例：pre { font-family: "Lucida Console", Monaco, monospace;字体大小：90%； }

【解决方案9】：

我在寻找一种方法时遇到了这个问题，最终找到了我自己的方法，它似乎很容易满足我的需求。我是在这里发帖的新手，所以我希望这能奏效...... 但是在 CSS 中有这个：

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

然后在您的 HTML 中，像我需要的那样，在句子中间设置“长标签”：

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

节省您需要的&nbsp; 或&emsp;。

希望这对某人有所帮助，干杯！

【讨论】：

这将在span标签的左边添加80px，在右边添加80px，而不是一个标签。
仍然是一个聪明的回应，因为您只添加了一小段标记，同时允许 CSS 进行样式设置。
我同意 @mcont 并将其更改为 padding: 0 0 0 80px 是需要 80 像素的左侧选项卡。但是，混合像素和 em 和 ens 是一种不好的做法。

【解决方案10】：

可以使用

&emsp;、&ensp;、&#8195;或&#8194;。

W3 说...

The character entities &ensp; and &emsp; denote an en space and an em space respectively, where an en space is half the point size and an em space is equal to the point size of the current font.

Read More at W3.org for HTML4

更多信息Wikipedia

【讨论】：

【解决方案11】：

AFAIK，唯一的方法就是使用

&nbsp;

如果您可以使用 CSS，那么您可以使用填充或边距。请参阅 Box model，对于 Internet Explorer，另请参阅 Internet Explorer box model bug。

【讨论】：

【解决方案12】：

如果您只想缩进段落中的第一个句子，您可以使用一个小的 CSS 技巧来做到这一点：

p:first-letter {
    margin-left: 5em;
}

【讨论】：

是的。那也行。如果要仅缩进第一句，请记住将其放在 :first-letter 上。

【解决方案13】：

如果空格变得很重要，最好使用预先格式化的文本和

 标签。

【讨论】：

OP 对空格并没有那么特别，只是询问了多个&nbsp; 的快捷方式。调用<pre> 标签会产生很多额外的工作。
要避免使用等宽字体，请使用 css "white-space:pre-wrap"
空白不是that important 的东西。这是生活中的事实。

【解决方案14】：

尽管在 HTML3 中引入了标签，但它从未进入浏览器。我一直认为这是一个真正的遗憾，因为如果我们可以使用它，在许多情况下生活会容易得多。但是你可以很容易地解决这个问题，给你一个假的标签。将以下内容添加到您的 HTML 头部或其他（不带样式标签）到您的 CSS 中：

<style>
    tab { padding-left: 4em; }
</style>

从那时起，当您需要在文档中添加标签时，将放入其中。它不是一个真正的选项卡，因为它不与选项卡标记对齐，但它可以满足大多数需求，而不必在笨拙的字符实体或跨度上犹豫不决。它使检查您的源代码变得非常容易，并且在您不想麻烦的表格或其他更复杂的“解决方案”中格式化简单的东西。

此解决方案的一个很好的方面是您可以快速搜索/替换文本文档，以将所有 TAB 替换为标记。

您也许可以定义一堆真正的绝对位置选项卡，然后在需要时使用适当的选项卡（例如或或其他），但我还没有找到没有它的方法缩进后续行。

【讨论】：

【解决方案15】：

我使用了带有内嵌样式的跨度。我必须这样做，因为我处理纯文本字符串并且需要用 4 个空格 (appx) 替换 \t。我不能使用&nbsp;，因为在他们被解释的过程中，最终的标记有非内容空间。

HTML：

<span style="padding: 0 40px">&nbsp;</span>

我在这样的 php 函数中使用它：

$message = preg_replace('/\t/', '<span style="padding: 0 40px">&nbsp;</span>', $message);

【讨论】：

【解决方案16】：

您可以使用表格并将width 属性应用于第一个<td>。

代码：

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

结果

Content1       Content2
Content3       Content4

【讨论】：

谢谢！！对于无法使用 CSS 的情况，这是最好和最通用的解决方案。

【解决方案17】：

如果您只需要一个标签，以下对我有用。

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
</style>

HTML 类似：

<p><b>asdf</b> <span class="tab">99967</span></p>
<p><b>hjkl</b> <span class="tab">88868</span></p>

您可以通过添加其他“标签”样式并更改 HTML 来添加更多“标签”，例如：

<style>
  .tab {
    position: absolute;
    left: 10em;
   }
  .tab1 {
    position: absolute;
    left: 20em;
   }
</style>

HTML 类似：

<p><b>asdf</b> <span class="tab">99967</span><span class="tab1">hear</span></p>
<p><b>hjkl</b> <span class="tab">88868</span><span class="tab1">here</span></p>

【讨论】：

【解决方案18】：

有一个简单的css：

white-space: pre;

它保留您在 HTML 中添加的空格，而不是统一它们。

【讨论】：

【解决方案19】：

如果你使用 CSS，我建议如下：

p:first-letter { text-indent:1em; }

这将像传统出版物一样缩进第一行。

【讨论】：

【解决方案20】：

<span style="margin-left:64px"></span>

这样考虑：一个标签等于 64 像素。所以这是我们可以通过 CSS 提供的空间。

【讨论】：

【解决方案21】：

好吧，如果一个人只需要在整个段落中的一行开头有一个长空格，那么这可能是一个解决方案：

<span style='display:inline-block;height:1em;width:4em;'>&nbsp;</span>

如果写得太多，或者在很多地方需要这样的标签，那么你可以这样做

<span class='tab'>&nbsp;</span>

然后将其包含到 CSS 中：

span.tab {display:inline-block;height:1em;width:4em;}

【讨论】：

【解决方案22】：

我们可以像这样使用 style="white-space:pre"：

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

里面的空白处是用制表符填充的，制表符的数量取决于文本。

它看起来像这样：

Text    : value
Text2   : value2
Text32  : value32

【讨论】：

【解决方案23】：

应该使用的理想CSS代码应该是“display”和“min-width”属性的组合......

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.

【讨论】：

【解决方案24】：

您可以写一次&emsp;，而不是写四次&nbsp;来获得等于tab的空间。

【讨论】：

【解决方案25】：

我使用不带项目符号的列表来呈现“标签式”外观。（这是我在使用 MS Word 时有时会做的）

在 CSS 文件中：

.tab {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}

并且在 HTML 文件中使用无序列表：

This is normal text
<ul class="tab">
    <li>This is indented text</li>
</ul>

此解决方案的美妙之处在于您可以使用嵌套列表进行进一步缩进。

这里是个菜鸟，如果有任何错误，请评论。

【讨论】：

(x)HTML 应该指定文档的内容，它的显示方式应该由 CSS 处理。使用表格布局网页的原因是永远不应该用于非表格数据。

【解决方案26】：

使用 CSS 和最佳实践，嵌套缩进菜单的动态创建如下：

为每个嵌套创建一个样式，例如 indent1、indent2 等，每个都指定自己的左边距。网站结构应该很少超过三层嵌套。
在自递归函数中使用静态变量（整数）来跟踪递归。
对于每个循环，使用服务器端脚本（例如 PHP 或 ASP）将循环编号附加到单词 indent，以便这些菜单由 CSS 适当地格式化。

或者，循环访问静态变量以使用多个 &nbsp; 或 <pre> 标记或其他字符（视情况而定）添加间距。

通过测试水平制表符&#09;，我发现在我描述的场景中它不能替代多个&nbsp;。你可能会有不同的结果。

【讨论】：

【解决方案27】：

只有“pre”标签：

<pre>Name:      Waleed Hasees
Age:        33y
Address:    Palestine / Jein</pre>

您可以在此标签上应用任何 CSS 类。

【讨论】：

【解决方案28】：

我只是推荐：

/* In your CSS code: */
pre
{
    display:inline;
}

<!-- And then, in your HTML code: -->

<pre>    This text comes after four spaces.</pre>
<span> Continue the line with other element without braking </span>

【讨论】：

【解决方案29】：

<head>
<style> t {color:#??????;letter-spacing:35px;} </style>
</head>

<t>.</t>

确保颜色代码与背景匹配 px 可以根据选项卡所需的长度变化。

然后在之后添加你的文字。

句号用作空格符，更容易输入，但 '& #160;'也可以用来代替句号，因此颜色编码是不相关的。

<head>
<style> t {letter-spacing:35px;} </style>
</head>

<t>&#160;</t>

这主要用于显示文本段落，但可能在脚本的其他部分有用。

【讨论】：

【解决方案30】：

你也可以使用：

p::before {
    content: "";
    padding-left: 30px;
}

并将“p”替换为您想到的任何其他选择器。

【讨论】：