Question

它们都意味着空间，但有什么不同吗？

Answer 1

一个是non-breaking space，另一个是常规空间。一个不间断的空格意味着该行不应该被包裹，就像它不会被包裹在一个单词的中间一样。

此外，正如Svend在评论中指出的那样，不间断的空间不会崩溃。

Answer 2

实体 产生一个不间断的空间，当您不希望在该位置自动换行时使用该空间。常规空间具有字符代码32，而非中断空间具有字符代码160。

例如，当您显示数字的空格为千位分隔符：1 234 567时，则使用不间断空格，以便不能在单独的行上拆分数字。如果您显示货币并且金额和货币之间有空格：42 SEK，那么您使用不间断的空间，这样您就不会获得一行的金额和下一行的货币。

Answer 3

除了这里的其他答案之外，不间断的空格不会像常规空格那样“折叠”。例如，两者

<p>Word1          Word2</p>

和

<p>Word1 Word2</p>

将在任何浏览器上呈现相同的内容，而

<p>Word1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Word2</p>

将在渲染时保留空格。

Answer 4

不是一个例子的答案..

示例＃1：

<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
    Hello&nbsp;There
</div>

示例＃2：

<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
    Hello There
</div>

并链接到fiddle。

Answer 5

你可以在这里看到一个有效的例子：

http://codepen.io/anon/pen/GJzBxo

和

http://codepen.io/anon/pen/LVqBQo

相同的div，相同的文字，不同的＆＃34;空格＆＃34;

<div style="width: 500px; background: red"> [loooong text with spaces]</div>

VS

<div style="width: 500px; background: red"> [loooong text with &nbsp;]</div>

Answer 6

多个普通空白字符（空格，制表符和换行符）为treated as one single white space character：

对于除PRE之外的所有HTML元素，空格序列将“单词”分开（我们在这里使用术语“单词”表示“非空白字符序列”）。格式化文本时，用户代理应根据特定书面语言（脚本）和目标媒体的惯例识别这些单词并将其排列。

所以

foo    bar

显示为

foo bar

但始终显示无休息空间。所以

foo&‍nbsp;&‍nbsp;&‍nbsp;bar

显示为

foo   bar

Answer 7

如前所述，您将不会收到有“无休息空间”的换行符。

另外要小心，只包含“”的元素可能会显示错误，其中＆amp; nbsp;将工作。至少在ie 6中（据我记得，IE7有相同的问题），如果你有一个空表元素，它将不会对元素应用样式，例如边框，如果没有内容，或者只有白色空间。因此，以下内容不会以边框呈现：

<td></td>
<td> <td>

此边框将显示在此示例中：

<td>& nbsp;</td>

嗯 - 要放入一个虚拟空间让它在这里正确渲染

Answer 8

第一个不被HTML解析器视为空格，第二个是。因此，“”不能保证在某些HTML标记内显示，而不可破坏的空间将始终显示。

Answer 9

@poidberg是对的，例如：

<h1>title</h1> <h2>date</h2>

不会在标题标记之间显示空格

& nbsp ;

会做空间：）

Answer 10

 应该作为空白处理。

  应该作为两个空格来处理

''可以作为一个非常有趣的空白来处理

''+''可以作为单个''

处理

Answer 11

当使用换行符时，使用$ bnsp时该行不会中断;因为它是一个“不间断的空间”。如果您有某些产品名称或类似产品，这一点非常重要。

如果您（必须）使用空格作为数字分隔符（如12344567，在法国显示为12 344 567），则会很有趣。没有这条线就会在数字中间突破，非常难看。测试：12 344 567

Answer 12

 是可堆叠的，这意味着您可以一起创建多个空格。

HTML只会解析一个空格''而它会丢弃其余的空间......

如果你想要五个空格，你可以放置5 x  

Answer 13

TLDR；除了接受的答案；一种是隐式的，一种是显式的。

当浏览器读取您由应用程序/库/框架编写或生成的HTML时，最好解释一下HTML的含义（随浏览器的不同而不同）。当您使用HTML实体代码时，您的浏览器更加具体。 您是在明确告诉它希望向用户显示一个字符（而不是只是为了让开发人员更容易阅读而只是将HTML隔开）。

更具体地说，如果输出的HTML是：

<html>
   <title>hello</title>
   <body>
       <p>
           Tell me and I will forget. Teach me and I
           may remember.  Involve me and I will learn.
       </p>
   </body>
</html>

浏览器只会在所有这些单词之间（即使是缩进的单词之间也要留出一个空格，以提高开发人员的可读性。

但是，如果您放置相同的东西，而只是将<p>标签更改为：

<p>Hello&nbsp;&nbsp;&nbsp;There</p>

然后，它将渲染空间，如您更明确地指示的那样。有使用这些空间进行样式设计的历史。随着CSS的成熟，这种用法已经有所减少。但是，许多HTML字符实体仍然有有效的用法：避免意外/非故意的解释（例如，如果您想显示代码）。 w3 has a great page to show the other character codes。

“”和“”之间有什么区别？

13 个答案: