如何使用 HTML/CSS 在文本中插入空格/制表符答案

【问题标题】：How to insert spaces/tabs in text using HTML/CSS如何使用 HTML/CSS 在文本中插入空格/制表符
【发布时间】：2012-04-05 06:38:58
【问题描述】：

可能的方法：

<pre> ... </pre>

或

style="white-space:pre"

还有什么？

【问题讨论】：

White space in HTML、Tabs in HTML、Spacing Out Your HTML，当然还有&nbsp;
你的意思是“标签”还是“标签”？
有没有等价于&nbsp;但要制作一个标签？
没有&tab;，但是我确实在github上找到了这个小js sn-p（基本上是查找替换成连续创建五个&nbsp;）...gist.github.com/AustinDizzy/1231e82184bea35c42ad

标签： html css tabs space pre

【解决方案1】：

您可以通过像<span style="padding-left: 20px;"> 这样的填充来完成，您可以在此处查看更多方法 - blank space in html

【讨论】：

警告！链接已损坏。

【解决方案2】：

使用标准 CSS tab-size。

要插入一个制表符（如果是标准制表键，移动光标）按 Alt + 0 + 0 + 9

.element {
    -moz-tab-size: 4;
    tab-size: 4;
}

我的首选：

*{-moz-tab-size: 1; tab-size: 1;}

查看 sn-p 或在 tab-size 上快速找到的示例。

.t1{
    -moz-tab-size: 1;
    tab-size: 1;
}
.t2{
    -moz-tab-size: 2;
    tab-size: 2;
}
.t4{
    -moz-tab-size: 4;
    tab-size: 4;
}
pre {border: 1px dotted;}

<h3>tab = {default} space</h3>
<pre>
	one tab text
		two tab text
</pre>

<h3>tab = 1 space</h3>
<pre class="t1">
	one tab text
		two tab text
</pre>

<h3>tab = 2 space</h3>
<pre class="t2">
	one tab text
		two tab text
</pre>

<h3>tab = 4 space</h3>
<pre class="t4">
	one tab text
		two tab text
</pre>

【讨论】：

【解决方案3】：

这是一个“制表符”文本（复制和粘贴）：“”

由于本网站的回答限制，它可能看起来不同或不是完整的标签。

【讨论】：

我认为您需要更清楚地表达答案。你的意思是从某个地方复制并粘贴一个空格？我认为这在这里行不通。
Markdown 源代码中有一个 TAB，但这里的 HTML 输出中没有（它是一个空格）。

【解决方案4】：

您可以使用此代码&#8287; 在 HTML 内容中添加空格。对于制表符空间，使用 5 次或更多。

在此处查看示例：https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace

【讨论】：

【解决方案5】：

比@Ivar 更进一步，像这样设置我自己的自定义标签的样式...对我来说，“标签”更容易记住和输入。

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

还有 HTML 实现...

<p>Left side of the whitespace<tab>Right side of the whitespace</p>

还有我的截图……

【讨论】：

【解决方案6】：

也称为固定空间或硬空间，non-breaking space (NBSP) 在编程和文字处理中用于在一行中创建一个不能被自动换行打破的空间。

使用 HTML，&nbsp; 允许您创建多个在网页上可见的空间，而不仅仅是在源代码中。

【讨论】：

【解决方案7】：

空白？你不能只使用填充吗？这是一个想法。这就是您可以在元素周围添加一些“空白区域”的方式。因此，您可以使用以下 CSS 标记：

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

【讨论】：

【解决方案8】：

user8657661's answer 最符合我的需求（将内容排成几行）。但是，我无法让示例代码按提供的方式工作，但我需要按如下方式进行更改：

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

【讨论】：

【解决方案9】：

这对我有用：

在我的 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

【讨论】：

【解决方案10】：

试试&emsp;。

根据 Special Characters 的文档：

字符实体&ensp; 和&emsp; 表示一个空格和一个em 分别为空间，其中一个 en 空间是点大小的一半，一个 em space 等于当前字体的磅值。对于固定间距字体，用户代理可以将 en 空间视为等同于 A 空格字符，而 em 空格相当于两个空格字符。

【讨论】：

【解决方案11】：

如果您要求制表符对齐某些行中的内容，您可以使用<table>。

将每一行放入<tr> ... </tr>。以及<td> ... </td> 中该行内的每个元素。当然，您可以随时控制每个表格单元格的填充以调整它们之间的间距。

这将使它们对齐，它们看起来会很漂亮:)

【讨论】：

表格应该用于表示表格数据，而不是用于格式化。在 90 年代，表格经常用于格式化，因为 HTML 的限制以及使用跨浏览器一致的样式编写 HTML 的挫败感。今天它被认为是一种反模式。
我明白你的意思，这可能是一些老派的解决方案，但我曾经遇到过他的问题，并且使用表格非常适合我
是的，但是您可以使用表格样式（使用现代 CSS）而不会弄乱语义！展示：表格等

【解决方案12】：

<span style="padding-left:68px;"></span>

你也可以使用：

padding-left
padding-right
padding-top
padding-bottom

【讨论】：

【解决方案13】：

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

本段的第一行将缩进大约五个字符，类似于标签缩进。

请参阅 How to Use HTML and CSS to Create Tabs and Spacing 了解更多信息。

【讨论】：

【解决方案14】：

如果空间的宽度/高度超出&nbsp;，我通常使用：

对于水平间隔：

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

对于垂直间隔：

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

【讨论】：

注意：请务必以像素为单位指定高度或宽度，即 10px。

【解决方案15】：

您可以将&nbsp; 用于空格，&lt; 用于<（小于，实体编号&#60;）和&gt; 用于>（大于，实体编号&#62;）。

完整列表可以在 HTML Entities 找到。

【讨论】：

【解决方案16】：

HTML 中Spaces 的类型

在文本之间创建四个空格-&emsp;

在文本之间创建两个空格 - &ensp;

在文本之间创建一个常规空格 - &nbsp;

创建一个狭窄的空间（类似于常规空间但略有不同 - "&thinsp";

句子之间的间距 - "</br>"

此链接可能会对您有所帮助。查看 [https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

【讨论】：

对于我测试过的浏览器、新旧版本的 Chrome 和 Firefox 都可以正常工作。研究了一些但不是全部。

【解决方案17】：

我喜欢用这个：

在您的 CSS 中：

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

在您的 HTML 中：

<p>Some Text <span class="tab">Tabbed Text</span></p>

【讨论】：

这是一个很好的答案。但我只想说使用 CSS 类而不是 id 会更好（这意味着将 #tab 替换为 .tab 和 id="tab" 替换为 class="tab"）因为如果我们在同一个文档中多次使用它，我们可能有未定义的行为。例如，参见this question。
今天这对我有帮助。非常感谢。

【解决方案18】：

在我常用的两个单词/句子之间插入tab space

&emsp; 和 &ensp;

【讨论】：