如何在HTML中的文本之间的空格?

问题描述:

你如何在HTML中的文本之间放置空格?例如,如何在HTML中的文本之间的空格?

<p>a b  c</p> 

你认为b和c之间有空间?

+0

'' 可能是你在找什么。或者你可以在''标签中包装一个字母并应用边距或填充。像'

a b c

' –

+3

可能的重复[如何在HTML中创建小空间?](http://stackoverflow.com/questions/2720770/how-to -create-small-spaces-in-html) –

尝试使用white-space与价值pre

pre保留了空格的序列。行仅在源中的换行符处和<br>元素处断开。

p { 
 
    white-space: pre; 
 
}
<p>a b  c</p>

使用monospaced的字体,如果你需要在每个黑的空间来采取一个字符的宽度。

p { 
 
    white-space: pre; 
 
    font-family: monospace; 
 
}
<p>a b  c</p>

您可以尝试在它们之间放置&nbsp;。像这样:

<p>a b&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c</p> 
+2

不是一个干净的解决方案。 –

+0

这并不干净,但你的问题没有具体说明什么可以和不可以做什么。你已经问过如何保持'

a'c

'(呵呵,内联不保留空格)的空格,这正是答案提供的。请尝试澄清你的答案多一点 –

有几种方法。

PRE标记

一种是使用<pre>标签,这会使与空白的完整内容。

空间实体

另一个是增加空间的实体,如&nbsp;(不间断空格)。请记住这种方法,有几个空间实体,这个特定的实体不会自动换行,这可能不是你想要的行为。 &#32;呈现一个正常空间, ,浏览器不应该折叠 ,并且会按预期的方式打开文字。

这是您可以使用的list of different Unicode spaces

CSS

而且,你通常不应使用HTML实体来创建文本这不是一个统一的句子的部分之间的空间。这是因为在这种情况下,更好的解决方案是使用marginpadding来分隔两者,并将它们分别保存在它自己的元素中。

另一个答案提到,如果间距一致但比正常大,CSS letter-spacing也是一个选项。

这里的所有这些方法的一个例子(CSS在这里并不重要):

th, td { 
 
    border: 1px solid black; 
 
    padding: 3px; 
 
} 
 

 
th { 
 
    background-color: darkgrey; 
 
    color: white; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
} 
 

 
body { 
 
    font-family: sans-serif; 
 
}
<table> 
 
    <thead> 
 
    <tr> 
 
     <th colspan="2">HTML Spacing</th> 
 
    </tr> 
 
    <tr> 
 
     <th>Method</th> 
 
     <th>Result</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Normal</td><td><p>a b  c</p></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Pre Tag</td><td><pre>a b  c</pre></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Margin Left</td><td><span>a </span><span>b</span><span style="margin-left: 3.5em;">c</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Non-breaking Space</td><td><p>a b&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c</p></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Em Space</td><td><p>a b&#8192;&#8192;&#8192;&#8192;&#8192;&#8192;&#8192;c</p></td> 
 
    </tr> 
 
    <tr> 
 
     <td>Letter-Spacing</td><td><span>a </span><span style="letter-spacing: 3.5em;">bc</span></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

使用&nbsp;。这也不会中断。

使用the CSS propertyword-spacing来设置单词之间的空格。您也可以使用<span>并应用边距或填充。

所以:

span { margin-left:1em } 
<p>a b <span>c</span></p>