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

HTML

小哥JinJinTony

2020-03-16

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

第1755篇《制表符空间而不是多个不间断空格（“ nbsp”）？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共25个回答
老丝前端 2020.03.16

我只是建议：

/* 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>
LGreen 2020.03.16

仅“ pre”标签：

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

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

宝儿猪猪西门 2020.03.16

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

  1. 为每个嵌套创建样式，例如indent1，indent2等，并指定每个样式的左边界。站点结构很少应该超过三个嵌套级别。
  2. 在自递归函数中使用静态变量（整数）来跟踪递归。
  3. 对于每个循环，indent使用服务器端脚本（例如PHP或ASP）将循环号附加到单词上，以便这些菜单由CSS适当地设置格式。

或者，循环遍历静态变量以使用多个&nbsp;或<pre>标签或其他适当字符来增加间距。

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

村村西门 2020.03.16

应该使用的理想CSS代码应该是“显示”和“最小宽度”属性的组合...

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.
十三Jim 2020.03.16

我使用没有项目符号的列表来显示“选项卡式”外观。（这是我有时在使用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>

该解决方案的优点在于，您可以使用嵌套列表进一步缩进。

一个菜鸟在这里说话，因此，如果有任何错误，请发表评论。

老丝LEY 2020.03.16

我们可以这样使用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
小小米亚前端 2020.03.16 
<span style="margin-left:64px"></span>

这样考虑：一个制表符等于64像素。这就是CSS可以提供​​的空间。

宝儿猪猪西门 2020.03.16

如果您使用的是CSS，我建议以下几点：

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

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

小宇宙理查德 2020.03.16

如果只需要一个选项卡，则以下选项对我有用。

<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>
番长西里神无 2020.03.16

有一个简单的CSS：

white-space: pre;

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

小小村村宝儿 2020.03.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
乐米亚 2020.03.16

尽管在HTML3中引入了<tab>标签，但它从未进入浏览器。我一直以为这是真正的遗憾，因为如果在许多情况下都可以使用，生活会容易得多。但是您可以轻松地对此进行补救，以便为您提供伪造的<tab>标记。将以下内容添加到HTML的开头，否则（不包含样式标签）添加到CSS中：

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

从那时起，当您需要在文档中使用标签时，在其中放置<tab>即可。它不是真正的制表符，因为它不与制表符对齐，但可以满足大多数需求，而不必因笨拙的字符实体或跨度而烦恼。它使检查源变得非常容易，并且可以轻松格式化不想在表格中遇到麻烦或其他更复杂的“解决方案”的简单事情。

此解决方案的一个不错的方面是，您可以快速搜索/替换文本文档，以用<tab>标记替换所有TAB。

您也许可以定义一堆真正的绝对位置TAB，然后在需要的地方使用适当的选项卡（例如<tab2>或<tab5>或任何其他选项），但是我没有找到一种方法来做到这一点，而不必缩进后面的行。

卡卡西Pro小卤蛋 2020.03.16

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

p:first-letter {
    margin-left: 5em;
}
JinJin猴子 2020.03.16

如果空格变得如此重要，则最好使用预格式化的文本和<pre>标签。

神奇Eva 2020.03.16

AFAIK，唯一的方法就是使用

&nbsp;

如果可以使用CSS，则可以使用padding或margin。请参阅Box model，对于Internet Explorer，还请阅读Internet Explorer box model bug。

DavaidJinJin 2020.03.16

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

在W3.org上阅读更多有关HTML3的内容

在W3.org上阅读更多有关HTML4的内容

维基百科上的更多内容

米亚小小神乐 2020.03.16

我在寻找一种方法时碰到了这一点，最终发现自己的方法似乎可以轻松地满足所需。我是刚来这里的新手，所以希望它能起作用...但是在CSS中有此功能：

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

然后在您的HTML中，像我需要的那样，将其作为句子中的“长标签”：

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

从量保存&nbsp;或者&emsp;是你所需要的。

希望这可以帮助某人，加油！

阿飞A 2020.03.16

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

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

and line breaks.

</pre>

在此链接上了解更多关于pre标签的信息

ItachiPro古一 2020.03.16

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

本质上，在这种情况下，空间成为内容而不是样式。我不知道为什么这么多人看不到。我猜想他们试图强制将样式和内容规则分开的刚性（HTML从一开始就设计成两者兼而有之–偶尔使用适当的标签定义唯一元素的样式而不必花费很多，这没有错。时间来创建CSS样式表，并且在进行适度使用时绝对没有任何不可读的地方。还有一些要说的是能够快速完成某些工作。）转化为他们只能将空白字符视为仅用于样式和缩进。

而且，当没有优雅的方式无需依赖&emsp;and 插入空格时&nbsp;，我会争辩说，与没有一个适当命名的标签可以使您快速插入大量空格相比，所得到的代码变得更加不可读。 （或者，如果您知道，一开始并没有不必要地占用空间）。

如上所述，您最好的选择是将其&emsp;插入正确的位置。

仲羽蛋蛋 2020.03.16

尝试 &emsp;

相当于四&nbsp;秒。

神无神无 2020.03.16

以下是HTML提供的3种不同的方式来插入空白

  1. 键入&nbsp;以添加一个空格。
  2. 键入&ensp;以添加2个空格。
  3. 键入&emsp;以添加4个空格。
米亚宝儿 2020.03.16

＆emsp; 就是答案。

但是，如果您习惯在文字处理器（例如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>

运行上面的代码片段以查看可视示例。

额外讨论

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

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

LEY番长 2020.03.16

不，就HTML而言，Tab只是空白。我推荐的EM-空间，而不是它是这个大（→| |←）... 通常 4个空格宽 -和输入为&emsp;。

如果幸运的话，您甚至可以使用Unicode 字符（“  ”）摆脱困境。

十三StafanEva 2020.03.16

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

有一个在ISO-8859-1 HTML定义没有标签的实体-但也有比其他几个空格字符&nbsp;，如&thinsp;，&ensp;和&emsp;。

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

这是HTML实体的完整列表，并对Wikipedia上的空格进行了有用的讨论。

老丝Jim猴子 2020.03.16

使用CSS更干净。尝试padding-left:5em或margin-left:5em酌情改为。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android