它们都表示空间,但有区别吗?


当前回答

与其说是回答,不如说是举例……

例# 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>

和小提琴的链接。

其他回答

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有一个很棒的页面来显示其他字符代码。

你可以在这里看到一个工作示例:

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

and

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

相同的div,相同的文本,不同的空格

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

vs

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

多个普通空格字符(空格、制表符和换行符)被视为单个空格字符:

对于除PRE之外的所有HTML元素,空格序列分隔“单词”(我们在这里使用术语“单词”来表示“非空格字符序列”)。当格式化文本时,用户代理应该识别这些单词,并根据特定的书面语言(脚本)和目标媒体的约定来布局它们。

So

foo    bar

显示为

foo bar

但是始终显示无间断空间。所以

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

显示为

foo   bar

,应该作为空白处理。

,,应该作为两个空白处理吗

' '可以作为一个无意义的空格处理

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

实体&nbsp;生成非换行空格,当不希望在该位置自动换行时使用该空格。常规空格的字符代码为32,而不间断空格的字符代码为160。

例如,当您显示以空格作为千位分隔符的数字:1 234 567时,则使用不间断空格,以便该数字不能在单独的行上分割。如果您显示货币,并且金额和货币之间有空格:42 SEK,则使用非换行空格,这样您就不会在一行上显示金额而在下一行上显示货币。