“'nbsp;&;”和“;“?

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

463431 次浏览
小开
最佳答案

一个是插入空格，另一个是常规空格。非换行空格意味着该行不应该在该点被换行，就像它不会在单词中间被换行一样。

此外，正如Svend在他的评论中指出的那样，非间断空间并不是折叠的。

小开

HTML解析器不将第一个空格视为空白，而将第二个空格视为空白。因此，“”并不一定会出现在特定的HTML标记中，而不可分割的空间总是会出现。

小开

@Zoidberg是对的 例子:< / p > 

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

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

& nbsp ;

将做空格:)

小开

&nbsp;应该作为一个空格来处理。

&nbsp;&nbsp;应该被处理为两个空白

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

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

小开

除了这里的其他答案外，非间断空格将不会被“折叠”;就像普通空间一样。例如:

<!-- Both -->
<p>Word1          Word2</p>
<!-- and -->
<p>Word1 Word2</p>
<!-- will render the same on any browser -->
<!-- While the below one will keep the spaces when rendered. -->
<p>Word1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Word2</p>

小开

多个普通空白字符(空格符、制表符和换行符)为作为单个空白字符处理:

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

所以

foo    bar

显示为

foo bar

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

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

显示为

foo   bar
小开

如前所述，在有“无换行空格”的地方，您将不会收到换行符。

还要注意，只包含" "的元素可能会错误地显示，其中 将工作。至少在i.e. 6中(据我所知，IE7也有同样的问题)，如果你有一个空的表格元素，如果没有内容，或者只有空白，它就不会对元素应用样式，例如边框。因此，下面的代码将不带边框:

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

而边界将在本例中显示:

<td>& nbsp;</td>

嗯-不得不放一个虚拟空间，让它在这里正确渲染

小开

实体&nbsp;产生一个非换行空格，当你不想在该位置自动换行时使用。常规空格的字符代码为32，而不间断空格的字符代码为160。

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

小开

当有换行符时，当你使用$bnsp;因为这是一个“非中断空间”。如果你有特定的产品名称，这可能很重要，总是应该写在一起。

如果您(必须)在数字中使用空格作为分隔符，比如12344567，在法国显示为12344567，这可能会很有趣。没有 这条线会在数字中间断掉，非常难看。测试:12 344 567

小开

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

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

并链接到小提琴。

小开

&nbsp;是可堆叠的，这意味着你可以一起创建多个空间。

HTML只会解析一个空格，其余的都省略了……

如果你需要5个空格，你可以放置5 x &nbsp;

小开

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

< a href = " http://codepen。io /不久/钢笔/ GJzBxo noreferrer“rel = > http://codepen.io/anon/pen/GJzBxo < / >

而且

< a href = " http://codepen。io /不久/钢笔/ LVqBQo noreferrer“rel = > 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>
小开

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


提交答案