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

问题描述 投票：0回答：19

可能的方式：

<pre> ... </pre>

或

style="white-space:pre"

还有什么吗？

html css tabs space pre
19个回答
166
投票

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

tab space

&emsp;
和
&ensp;

128
投票

在空间的宽度/高度超出

&nbsp;
的情况下，我通常使用：

对于水平垫片：

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

对于垂直垫片：

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

您可以使用

&nbsp;
表示空格，
&lt;
表示
<
（小于，实体编号
&#60;
），
&gt;
表示
>
（大于，实体编号
&#62;
）。

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

49
投票

尝试

&emsp;
.

根据特殊字符的文档：

字符实体

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

30
投票

HTML 中

Spaces
的类型

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

&emsp;

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

&ensp;

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

&nbsp;

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

"&thinsp";

句子之间的间距 - 

"</br>"

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

24
投票

我喜欢用这个：

在你的 CSS 中：

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

在您的 HTML 中：

<p>Some Text <span class="tab">Tabbed Text</span></p>
16
投票
<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 创建制表符和间距。

9
投票

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

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

以及 HTML 实现...

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

还有我的截图...

6
投票

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

您还可以使用：

padding-left
padding-right
padding-top
padding-bottom
5
投票

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

使用 HTML，

&nbsp;
允许您创建多个空间，这些空间在网页上可见，而不仅在源代码中可见。

4
投票

您可以像

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

3
投票

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

<table>
。

将每一行放在

<tr> ... </tr>
中。以及
<td> ... </td>
中该行内的每个元素。当然，您始终可以控制每个表格单元格的填充以调整它们之间的空间。

这将使它们对齐并且看起来非常漂亮:)

3
投票

使用标准 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>

2
投票

这对我有用：

在我的 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
1
投票

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

1
投票

空白？你不能只使用填充吗？这是一个想法。这就是您如何在元素周围添加一些“空白区域”。所以你可以使用下面的 CSS 标签：

padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
1
投票

您可以使用此代码

&#8287;
在HTML内容中添加一个空格。对于制表符空间，使用它 5 次或更多。

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

0
投票

在我的情况下，我需要在每个段落的开头插入，所以我做了以下并且对我有用，我希望它可以帮助某人

p:first-letter {
    margin-left: 20px
}
-2
投票

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

它可能无法在答案的呈现版本上正确显示，但如果您愿意，可以从 Markdown 源复制和粘贴它。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.