“＆nbsp;”和有什么区别和“”？

146

两者都意味着空间，但是有什么区别吗？

html

— 我的天啊
source

195

一个是不间断空间，另一个是规则空间。不间断的空格表示该行不应在该点处换行，就像它不会在一个单词的中间换行一样。

此外，正如斯文德（Svend）在其评论中指出的那样，不间断的空间不会崩溃。

— 布赖恩·拉斯穆森
source

42

＆nbsp; 也是非折叠式的，这可能是它们使用中最重要的方面（至少，这就是我倾向于使用它们，填充东西，快速简便的方式）

— Svend

47

提示：请不要连续使用15％的空格。当我看到有人这样做时，会让我发疯。使用CSS填充或边距。

— 马修·拉帕蒂

5

当我看到Microsoft Word也这样做时，这也让我发疯…

— Josh Lee 2009年

@Amarghosh：我一直想成为的大师……:)

— Brian Rasmussen

1

间距实体还有其他尺寸，例如&hairsp   &ensp; &emsp;您可以在[ jsfiddle.net/medmunds/4crt3c9j/]

— Mark Gavagan

70

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

例如，当您将数字显示为带有千位分隔符的空格：1 234 567时，请使用不间断的空格，以使数字不能拆分为单独的行。如果显示货币，则金额和货币之间有一个空格：42 SEK，那么请使用不间断空格，以免一行中没有金额，而下一行中没有货币。

— 古法
source

3

nbsp使用的好例子。我一直在寻找自己，但没想到他们。

— 皮特2009年

47

除了此处的其他答案外，不会破坏不折断的空格，就像常规空格一样。例如，两者

<p>Word1          Word2</p>

和

<p>Word1 Word2</p>

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

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

渲染时将保留空格。

— 格雷姆·珀罗
source

不，那我最终想到了＆amp; 始终。它没有解释＆amp，但确实解释了＆nbsp。

— Graeme Perrow，2009年

33

答案不及示例...

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

并链接到小提琴。

— 凯尔COMnet
source

2

无需瞥一眼恕我直言的其他答案。9年，仍然有效。

— snr

10

您可以在此处看到一个有效的示例：

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

和

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

相同的div，相同的文本，不同的“空格”

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

与

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

— 阿尔贝托·博塔里尼
source

能否请您解释一下，为什么不赞成这个答案？

— alberto-bottarini

我已经投票了。我认为这并不能解释问题。但是，您指出的是有用的视觉效果。

— Nishant

1

因此，问题和答案应该是独立的。如果完整答案也直接包含在帖子中，则也允许外部链接到Codepen 。为了遵守SO政策，您的帖子要么在您的答案中包括代码的结果输出，要么添加SO自己的嵌入式Codepen版本，以便访问者可以运行代码并看到结果而无需离开外部页面。采用独立策略的原因是，如果链接不可达，答案将变得毫无用处。同样，要求用户离开以获得答案的用户体验也很差。edit

— SherylHohman

6

多个普通空格字符（空格，制表符和换行符）被视为一个空格字符：

对于除之外的所有HTML元素PRE，空白序列将单独的“单词”（在此使用术语“单词”表示“非空白字符的序列”）。在设置文本格式时，用户代理应识别这些单词并根据特定书面语言（脚本）和目标媒体的约定对它们进行布局。

所以

foo    bar

显示为

foo bar

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

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

显示为

foo   bar

— 秋葵
source

5

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

另外请注意，仅包含“”的元素可能会显示错误，其中＆nbsp; 将工作。至少在ie 6中（据我所知，IE7存在相同的问题），如果您有一个空的表格元素，则该元素将不会应用样式（例如边框），如果没有内容或仅是白色空间。因此，以下内容将不会带有边框：

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

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

<td>& nbsp;</td>

嗯-必须放置一个虚拟空间以使其在此处正确呈现

— 皮特
source

@Stewart -我试着用放大器，它在文本工作，而不是在代码exmple -因为它也写了“放”出来的一部分

— 皮特

很奇怪。显然是一个错误。

— 斯图尔特

2

HTML解析器不将第一个视为空白，第二个则视为空白。因此，不能保证在特定的HTML标记中显示“”，而始终显示不可破坏的空间。

— 佐德伯格
source

1

  应该作为空白处理。

   应该作为两个空格处理

可以将''当作非有趣的空格

''+''可以作为一个单独的''

— 编码巴菲尔德
source

1

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

HTML只会解析一个空格''，其余的将被删除...

如果要五个空间，则应放置5 x  

0

@Zoidberg是正确的，例如：

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

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

& nbsp ;

会做空间:)

— IProblemFactory
source

0

换行时，使用$ bnsp时，换行不会中断；因为这是一个“不间断的空间”。如果您有某些产品名称或此类名称，则应始终将它们一起写出，这一点很重要。

如果您（必须）使用空格作为数字的定界符（例如12344567），在法国显示为12344567，可能会很有趣。如果没有该行，该行将在数字中间中断，非常难看。测试：12344567

— 普施曼
source

0

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>Hello&nbsp;&nbsp;&nbsp;There</p>

然后，将按照您更明确的指示渲染空间。有使用这些空间进行样式设计的历史。随着CSS的成熟，这种用法已经有所减少。但是，许多HTML字符实体仍然有有效的用法：避免意外/非故意的解释（例如，如果您想显示代码）。在W3有很大的页面显示其他字符代码。

— 马克
source

尝试：Hello   There或Hello       There（如果断点不是问题，则可以在之前和之后使用Regular空空格来保存一些位 ）。

— 靠机械装置维持生命的人

“＆nbsp;”和有什么区别 和“”？

“＆nbsp;”和有什么区别和“”？