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

可能的方法:

<pre> ... </pre>

或

style="white-space:pre"

还有别的事吗?

1485648 次浏览
小开

你可以用&nbsp;表示空格，用&lt;表示<(小于，实体号&#60;)，用&gt;表示>(大于，实体号&#62;)。

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

小开

在空间的宽度/高度超出&nbsp;的情况下，我通常使用:

对于水平垫片:

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

对于垂直垫片:

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

这个段落的第一行缩进大约5个字符，类似于标签缩进。

更多信息请参见如何使用HTML和CSS创建制表符和空格。

小开

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

你还可以使用:

padding-left
padding-right
padding-top
padding-bottom
小开

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

&emsp;和&ensp;

小开

我喜欢用这个:

在CSS中:

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

在你的HTML中:

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

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

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

这样可以使它们对齐，看起来很漂亮:)

小开

&emsp;试试。

根据特殊字符 .的文档:

字符实体&ensp;和&emsp;表示一个en空格和一个em 分别是空间，其中en空间是点大小的一半，em空间是点大小的一半 空格等于当前字体的点大小。固定螺距 字体时，用户代理可以将en空格视为等同于A 空格字符，em空间等价于两个空间 字符。< / p >
小开

这招对我很管用:

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

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

小开

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

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

HTML中Spaces的类型

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

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

在文本之间创建一个规则的空格——&nbsp;

创建一个狭窄的空间(类似于常规空间，但略有不同- "&thinsp"; < / p >

句与句之间的间距——"</br>"

这个链接可能对你有帮助。查看[https://hea-www.harvard.edu/ ~好/科技/ html-sentences.html]

小开

也可以称为固定空间或硬空间，插入空格 (NBSP)用于编程和字处理，在一行中创建一个不能被换行破坏的空间。

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

小开

走一步比@Ivar和风格我自己的自定义标签像这样…对我来说，“tab”更容易记忆和输入。

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

HTML实现……

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

截图of this code sample

我的截图…

小开

使用标准CSS tab-size。

插入一个制表符(如果是标准的制表键，移动光标)按Alt + 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>

小开

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

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

小开

这是一个“Tab”文本(复制粘贴):" "

由于本网站的回答限制，它可能会显示不同或不是一个完整的选项卡。

小开

你可以通过像<span style="padding-left: 20px;">这样的填充，你可以在- HTML中的空格这里检查更多方法

小开

在我的例子中，我需要在每段的开头插入，所以我做了下面的事情，它对我很有效，我希望它能帮助到别人

p:first-letter {
margin-left: 20px
}

提交答案