blocks|key|402383|text|在我经常使用的两个单词/句子之间插入tab+space|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|402384|&emsp;和&ensp;|402385|entityMap^0|I|9|0|0|6|7|6|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

To insert <code>tab space</code> between two words/sentences I usually use

<code>&amp;emsp;</code> and <code>&amp;ensp;</code>

blocks|key|617951|text|在空间的宽度/高度超过&nbsp;的情况下，我通常使用：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|617952|对于水平间隔符：|617953|<span+style="display:inline-block;+width:+YOURWIDTH;">|code-block|syntax|javascript|617954|对于垂直间隔器：|617955|<span+style="display:block;+height:+YOURHEIGHT;">|617956|entityMap^0|B|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

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

For horizontal spacer:

<pre><code>&lt;span style="display:inline-block; width: YOURWIDTH;"&gt;&lt;/span&gt;
</code></pre>

For vertical spacer:

<pre><code>&lt;span style="display:block; height: YOURHEIGHT;"&gt;&lt;/span&gt;
</code></pre>

blocks|key|618366|text|HTML中的Spaces类型|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|618367|在文本之间创建四个空格-+&emsp;|618368|在文本之间创建两个空格-+&ensp;|618369|在文本之间创建规则空格-+&nbsp;|618370|创建一个狭窄的空间(类似于常规空间，但略有不同-+"&thinsp";|618371|句子之间的间距-+""|618372|此链接可能会对您有所帮助。查看[https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]|618373|entityMap|0|LINK|mutability|MUTABLE|url|https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]^0|6|6|0|D|6|0|D|6|0|D|6|0|P|A|0|9|7|0|F|1O|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|N|3|O|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|R|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

Types of <code>Spaces</code> in HTML

Creates four spaces between the text- <code>&amp;emsp;</code>

Creates two spaces between the text - <code>&amp;ensp;</code>

Creates a regular space between the text - <code>&amp;nbsp;</code>

creates a narrow space ( similar to regular space but slight difference - 
<code>"&amp;thinsp";</code>

spacing between sentences - <code>"&lt;/br&gt;"</code>

This link might help you. Check out [<a href="https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]" rel="noreferrer">https://hea-www.harvard.edu/~fine/Tech/html-sentences.html]</a>

blocks|key|618107|text|我喜欢用这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|618108|在你的CSS中：|618109|.tab+{+
+++++++display:inline-block;+
+++++++margin-left:+40px;+
}|code-block|syntax|javascript|618110|在您的HTML中：|618111|Some+Text+<span+class="tab">Tabbed+Text|618112|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I like to use this:

In your CSS:

<pre class="lang-css prettyprint-override"><code>.tab { 
 display:inline-block; 
 margin-left: 40px; 
}
</code></pre>

In your HTML: 

<pre><code>&lt;p&gt;Some Text &lt;span class="tab"&gt;Tabbed Text&lt;/span&gt;&lt;/p&gt;
</code></pre>

blocks|key|618488|text|比@Ivar更进一步，像这样设计我自己的自定义标签……对我来说，'tab‘更容易记忆和输入。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|618489|tab+{
++++display:+inline-block;
++++margin-left:+40px;
}|code-block|syntax|javascript|618490|和HTML实现...|618491|Left+side+of+the+whitespace<tab>Right+side+of+the+whitespace|618492|​|618493|📷|atomic|offset|length|618494|618495|我的截图..。|618496|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/277d04780be91bf416a057e730d3db3e.png|imageAlt^0|0|0|0|0|0|0|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|18|8|@]|9|@$P|19|Q|1A|1|1B]]|A|$]]|$1|R|3|L|5|6|7|1C|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1D|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11|12|-4]]]]

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

<pre><code>tab {
 display: inline-block;
 margin-left: 40px;
}
</code></pre>

And the HTML implementation...

<pre><code>&lt;p&gt;Left side of the whitespace&lt;tab&gt;Right side of the whitespace&lt;/p&gt;
</code></pre>

<a href="https://i.stack.imgur.com/F6l4O.png" rel="noreferrer"><img src="https://i.stack.imgur.com/F6l4O.png" alt="Screenshot of this code sample"></a>

And my screenshot...

blocks|key|402338|text|<span+style="padding-left:68px;">|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|402339|您还可以使用：|402340|padding-left
padding-right
padding-top
padding-bottom|code-block|syntax|javascript|402341|entityMap^0|0|14|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<code>&lt;span style="padding-left:68px;"&gt;&lt;/span&gt;</code>

You can also use:

<pre><code>padding-left
padding-right
padding-top
padding-bottom
</code></pre>

blocks|key|402719|text|或者称为固定空间或硬空间，在编程和字处理中使用non-breaking+space+(NBSP)在一行中创建不能由换行中断的空格。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|402720|使用超文本标记语言，&nbsp;允许你在网页上创建多个可见空间，而不仅仅是源代码。|style|CODE|402721|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Non-breaking_space^0|N|I|0|0|A|6|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@$A|U|B|V|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

Alternatively referred to as a fixed space or hard space, <a href="https://en.wikipedia.org/wiki/Non-breaking_space" rel="nofollow noreferrer">non-breaking space</a> (NBSP) is used in programming and word processing to create a space in a line that cannot be broken by word wrap.

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

blocks|key|618180|text|如果您要求使用制表符来对齐某些行中的内容，您可以使用<table>。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|618181|将每一行放入<tr>+...+</tr>中。以及<td>+...+</td>中该行内的每个元素。当然，您可以随时控制每个表格单元格的填充，以调整它们之间的间距。|618182|这将使它们对齐，并且看起来非常漂亮:)|618183|entityMap^0|Q|7|0|6|E|O|E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

If you're asking for tabs to align stuff in some lines, you can use <code>&lt;table&gt;</code>.

Putting each line in <code>&lt;tr&gt; ... &lt;/tr&gt;</code>. And each element inside that line in <code>&lt;td&gt; ... &lt;/td&gt;</code>. And of course you can always control the padding of each table cell to adjust the space between them.

This will make them aligned and they will look pretty nice :)

blocks|key|618678|text|你可以通过像<span+style="padding-left:+20px;">这样的填充来做，你可以在这里-+blank+space+in+html检查更多的方式|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|618679|entityMap|0|LINK|mutability|MUTABLE|url|https://dev2devs.com/basics-of-html-add-blank-space-in-html/^0|6|Y|1K|J|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

You can do through padding like <code>&lt;span style="padding-left: 20px;"&gt;</code>, you can check more ways here at - <a href="https://dev2devs.com/basics-of-html-add-blank-space-in-html/" rel="nofollow noreferrer">blank space in html</a>

blocks|key|402640|text|空格？你不能只用填充吗？这是一个想法。这就是在元素周围添加一些“空白区域”的方法。因此，您可以使用以下CSS标签：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|402641|padding:+5px;
padding-top:+5px;
padding-bottom:+5px;
padding-left:+5px;
padding-right:+5px;|code-block|syntax|javascript|402642|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

White space? Couldn't you just use padding? That is an idea. That is how you can add some "blank area" around your element. So you can use the following CSS tags:

<pre><code>padding: 5px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
</code></pre>

blocks|key|402880|text|您可以使用下面的代码&#8287;在HTML内容中添加一个空格。对于制表符空间，使用5次或更多。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|402881|在这里查看一个示例：https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace|402882|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/charsets/tryit.asp?deci=8287&ent=ThickSpace^0|A|7|0|A|1X|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

You can use this code <code>&amp;#8287;</code> to add a space in the HTML content. For tab space, use it 5 times or more. 

Check an example here: <a href="https://www.w3schools.com/charsets/tryit.asp?deci=8287&amp;ent=ThickSpace" rel="nofollow noreferrer">https://www.w3schools.com/charsets/tryit.asp?deci=8287&amp;ent=ThickSpace</a>

blocks|key|618236|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|618237|在我的CSS中，我有：|618238|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;+}|code-block|syntax|javascript|618239|然后在HTML中，我只需使用我的标签：|618240|Dog+Food+<tab3>+:$30
Milk+<tab3>+:$3
Pizza+Kit+<tab3>+:$5
Mt+Dew+<tab3>+:$1.75|618241|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This worked for me:

In my CSS I have:

<pre><code>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; }
</code></pre>

Then in the HTML I just use my tabs:

<pre><code>Dog Food &lt;tab3&gt; :$30
Milk &lt;tab3&gt; :$3
Pizza Kit &lt;tab3&gt; :$5
Mt Dew &lt;tab3&gt; :$1.75
</code></pre>

blocks|key|618279|text|user8657661's+answer最接近我的需求(把东西排成几行)。但是，我无法让示例代码按所提供的方式工作，但我需要按如下方式更改它：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|618280|<html>
++++<head>
++++++++<style>
++++++++++++.tab9+{position:absolute;left:150px;+}
++++++++</style>
++++</head>

++++<body>
++++++++Dog+Food:+<span+class="tab9">+$30 
++++++++Milk+of+Magnesia:<span+class="tab9">+$30 
++++++++Pizza+Kit:<span+class="tab9">+$5 
++++++++Mt+Dew+<span+class="tab9">+$1.75 
++++</body>
</html>|code-block|syntax|javascript|618281|如果您需要右对齐的数字，您可以将left:150px更改为right:150px，但您需要根据屏幕的宽度更改数字(按照书写，数字将从屏幕的右边缘起150个像素)。|style|CODE|618282|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/9792849/how-to-insert-spaces-tabs-in-text-using-html-css/47035723#47035723^0|0|K|0|0|0|G|A|T|B|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$A|10|B|11|K|L]|$A|12|B|13|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<a href="https://stackoverflow.com/questions/9792849/how-to-insert-spaces-tabs-in-text-using-html-css/47035723#47035723">user8657661's answer</a> is closest to my needs (of lining things up across several lines). However, I couldn't get the example code to work as provided, but I needed to change it as follows:

<pre><code>&lt;html&gt;
 &lt;head&gt;
 &lt;style&gt;
 .tab9 {position:absolute;left:150px; }
 &lt;/style&gt;
 &lt;/head&gt;

 &lt;body&gt;
 Dog Food: &lt;span class="tab9"&gt; $30&lt;/span&gt;&lt;br/&gt;
 Milk of Magnesia:&lt;span class="tab9"&gt; $30&lt;/span&gt;&lt;br/&gt;
 Pizza Kit:&lt;span class="tab9"&gt; $5&lt;/span&gt;&lt;br/&gt;
 Mt Dew &lt;span class="tab9"&gt; $1.75&lt;/span&gt;&lt;br/&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

If you need right-aligned numbers you can change <code>left:150px</code> to <code>right:150px</code>, but you'll need to alter the number based on the width of the screen (as written the numbers would be 150 pixels from the right edge of the screen).

blocks|key|402939|text|这是一个"Tab“文本(复制并粘贴)：”“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|402940|由于此站点的答案限制，它可能会显示不同或不是完整的选项卡。|402941|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Here is a "Tab" text (copy and paste): " " 

It may appear different or not a full tab because of the answer limitations of this site.

Possible ways:

<pre><code>&lt;pre&gt; ... &lt;/pre&gt;
</code></pre>

or

<pre><code>style="white-space:pre"
</code></pre>

Anything else?

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

可能的方式：<pre> ... </pre>或style="white-space:pre"还要别的吗？

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

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 14

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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