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

182

可能的方式：

<pre> ... </pre>

要么

style="white-space:pre"

还要别的吗？

— 耶塞努尔
source

1

HTML中的空白，HTML中的选项卡，扩展HTML，以及 

— benedict_w 2012年

您是指“标签”还是“标签”？

— user123444555621 2012年

2

是否有等同于 但制表符的功能？

— 胡安·索拉诺

没有&tab;，但是我确实在github上找到了这个小js代码段（基本上找到并替换为 连续创建五个代码段）... gist.github.com/AustinDizzy/1231e82184bea35c42ad

— dgig

143

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

&emsp; 和 &ensp;

— 吉里
source

113

在空间的宽度/高度超出限制的情况下， 我通常使用：

对于水平垫片：

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

对于垂直垫片：

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

— 加波
source

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

— About7Deaths

57

您可以将 空格<用于<（小于实体编号<），>用于>（大于实体编号>）。

完整列表可以在HTML实体中找到。

— 哈里姆·卡鲁姆
source

43

尝试&emsp;。

根据特殊字符中的文档：

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

— 阿比舍克·戈尔（Abhishek Goel）
source

24

我喜欢用这个：

在您的CSS中：

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

在您的HTML中：

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

— 伊瓦尔·哈里斯（Ivar Harris）
source

1

这是一个很好的答案。但我只是想说，这将使用CSS类，而不是ID来更好（这意味着在更换#tab由.tab并且id="tab"通过class="tab"），因为如果我们在同一文件中多次使用它，我们可能有不确定的行为。参见，例如，这个问题。

— Hilder Vitor Lima Pereira

今天对我有帮助。非常感谢。

— justnisar

19

SpacesHTML中的类型

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

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

在文本之间创建规则的空格-  

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

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

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

— 维维克·布迪西（Vivek Budithi）
source

15

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

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

有关更多信息，请参见如何使用HTML和CSS创建选项卡和间距。

— 萨穆尤卡维
source

6

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

您还可以使用：

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

— 罗恩1925
source

4

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

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

还有HTML实现...

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

还有我的截图...

— 担
source

3

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

将每一行放入<tr> ... </tr>。并且该行中的每个元素都在中<td> ... </td>。当然，您始终可以控制每个表格单元格的填充以调整它们之间的空间。

这将使它们对齐，并且它们看起来会很不错:)

— Argento
source

3

表应用于表示表格数据，而不用于格式。在90年代，由于HTML的限制和挫折感而经常用于格式化的表格在HTML中使用的样式在浏览器中始终有效。今天，它被认为是一种反模式。

— David Baucum

我明白你的意思，这可能是一些过时的解决方案，但是我一次遇到了他的问题，使用桌子对我来说很完美

— Argento

1

是的，但是您可以使用表样式（与现代CSS一起使用）而不会弄乱语义！显示：表格等

— 。– Julix

3

也称为固定空间或硬空间，不间断空间（NBSP）也它在编程和文字处理中用于在行中创建不能被自动换行打断的空间。

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

— 马斯特罗
source

1

空格？您不能只使用填充吗？那是个主意。这样便可以在元素周围添加一些“空白区域”。因此，您可以使用以下CSS标签：

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

— 詹姆斯·帕克
source

1

您可以使用此代码 在HTML内容中添加空格。对于制表符空间，请使用5次以上。

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

— Roshan Yadav
source

1

使用标准CSS tab-size。

要插入标签符号（如果是标准标签键，请移动光标），请按Alt+ 0+ 0+9

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

我的首选：

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

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

展开摘要

— 斯威德
source

0

这对我有用：

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

— 用户名
source

0

user8657661的答案最接近我的需求（将内容排列成几行）。但是，我无法使示例代码按所提供的那样工作，但是我需要对其进行如下更改：

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

— 史蒂夫·麦克罗伯茨
source

0

您可以像这样通过填充进行操作<span style="padding-left: 20px;">，您可以在此处检查更多方法-html中的空白

— 普拉松
source

-2

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

由于此站点的答案限制，它可能显示为不同的选项卡或显示为完整的选项卡。

— 詹姆士
source

1

我认为您需要更清楚地表达答案。您的意思是从某处复制并粘贴空格吗？我认为这不会在这里工作。

— smilyface，

1

Markdown源代码中有一个TAB，但此处的HTML输出中没有TAB（而是一个空格）。

— 彼得·莫滕森