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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9792849/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 23:15:49  来源:igfitidea点击:

How to insert spaces/tabs in text using HTML/CSS

htmlcsstabsspacepre

提问by Yeseanul

Possible ways:

可能的方法:

<pre> ... </pre>

or

或者

style="white-space:pre"

Anything else?

还要别的吗?

回答by Giri

To insert tab spacebetween two words/sentences I usually use

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

&emsp;and &ensp;

&emsp;&ensp;

回答by Japol

In cases wherein the width/height of the space is beyond &nbsp;I usually use:

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

For horizontal spacer:

对于水平间隔:

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

For vertical spacer:

对于垂直间隔:

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

回答by Halim Qarroum

You can use &nbsp;for spaces, &lt;for <(less than, entity number &#60;) and &gt;for >(greater than, entity number &#62;).

您可以使用&nbsp;空格、&lt;for <(小于,实体编号&#60;)和&gt;for >(大于,实体编号&#62;)。

A complete list can be found at HTML Entities.

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

回答by Abhishek Goel

Try &emsp;.

试试&emsp;

As per the documentation at Special Characters:

根据特殊字符中的文档:

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. For fixed pitch fonts, the user agent can treat the en space as being equivalent to A space character, and the em space as being equivalent to two space characters.

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

回答by Ivar Harris

I like to use this:

我喜欢用这个:

In your CSS:

在你的 CSS 中:

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

In your HTML:

在您的 HTML 中:

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

回答by Vivek Budithi

Types of Spacesin HTML

SpacesHTML 中的类型

Creates four spaces between the text- &emsp;

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

Creates two spaces between the text - &ensp;

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

Creates a regular space between the text - &nbsp;

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

creates a narrow space ( similar to regular space but slight difference - "&thinsp";

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

spacing between sentences - "</br>"

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

This link might help you. Check out [https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]

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

回答by sammyukavi

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

The first line of this paragraph will be indented about five characters, similar to a tabbed indent.

本段的第一行将缩进大约五个字符,类似于制表符缩进。

See How to Use HTML and CSS to Create Tabs and Spacingfor more information.

有关详细信息,请参阅如何使用 HTML 和 CSS 创建制表符和间距

回答by Ron1925

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

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

You can also use:

您还可以使用:

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

回答by Dan

Go a step further than @Ivar and style my own custom tag like so... For me 'tab' is easier to remember and type.

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

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

And the HTML implementation...

和 HTML 实现...

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

Screenshot of this code sample

此代码示例的屏幕截图

And my screenshot...

还有我的截图...

回答by mastro

Alternatively referred to as a fixed space or hard space, non-breaking space(NBSP) is used in programming and word processing to create a space in a line that cannot be broken by word wrap.

也称为固定空格或硬空格,不间断空格(NBSP) 在编程和文字处理中用于在行中创建不能被自动换行中断的空格。

With HTML, &nbsp;allows you to create multiple spaces that are visible on a web page and not only in the source code.

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