“和”和“”有什么区别?

Both of them mean space, but is there any difference?

它们都意味着空间，但有区别吗?

13 个解决方案

#1

One is non-breaking space and the other is a regular space. A non-breaking space means that the line should not be wrapped at that point, just like it wouldn’t be wrapped in the middle of a word.

一个是不间断的空间，另一个是常规空间。一个不间断的空间意味着该行不应该被包装在那个点上，就像它不会被包裹在一个单词的中间。

Furthermore as Svend points out in his comment, non-breaking spaces are not collapsed.

此外，正如Svend在他的评论中指出的那样，不破坏的空间并没有崩溃。

#2

The entity   produces a non-breaking space, which is used when you don't want an automatic line break at that position. The regular space has the character code 32, while the non-breaking space has the character code 160.

实体,产生一个不间断的空间，当你不想在那个位置自动换行的时候使用。常规空间有字符代码32，而非分割空间有字符代码160。

For example when you display numbers with space as thousands separator: 1 234 567, then you use non-breaking spaces so that the number can't be split on separate lines. If you display currency and there is a space between the amount and the currency: 42 SEK, then you use a non-breaking space so that you don't get the amount on one line and the currency on the next.

例如，当您将数字显示为数千分隔符:1 234 567时，则使用非分割空间，以使数字不能在单独的行上分割。如果你显示货币，在货币和货币之间有一个空格:42 SEK，那么你使用一个不间断的空间，这样你就不会在一个线上和下一个货币上得到金额。

#3

In addition to the other answers here, non-breaking spaces will not be "collapsed" like regular spaces will. For example, both

除了这里的其他答案之外，非破坏空间不会像普通空间那样“崩溃”。例如,

<p>Word1          Word2</p>

and

和

<p>Word1 Word2</p>

will render the same on any browser, while

会在任何浏览器上呈现相同的结果吗?

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

will keep the spaces when rendered.

在渲染时保留空格。

#4

Not an answer as much as an examples..

与其说是一个答案，不如说是一个例子。

Example #1:

例# 1:

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

Example #2:

例# 2:

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

And link to fiddle.

小提琴和链接。

#5

As already mentioned, you will not receive a line break where there is a "no-break space".

如前所述，您将不会接收到有“不间断空格”的换行符。

Also be wary, that elements containing only a " " may show up incorrectly, where   will work. In i.e. 6 at least (as far as I remember, IE7 has the same issue), if you have an empty table element, it will not apply styling, for example borders, to the element, if there is no content, or only white space. So the following will not be rendered with borders:

也要小心，那些只包含一个“”的元素可能会出现错误，在哪里?将工作。至少在6个方面(据我所知，IE7也有同样的问题)，如果你有一个空的表元素，它将不会应用样式，例如边框，元素，如果没有内容，或者只有空白。因此，以下内容将不会以国界呈现:

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

Whereas the borders will show up in this example:

而边界会在这个例子中出现:

<td>& nbsp;</td>

Hmm -had to put in a dummy space to get it to render correctly here

嗯-必须放置一个虚拟空间让它在这里正确渲染。

#6

Multiple normal white space characters (space, tabulator and line break) are treated as one single white space character:

多个正常的空白字符(空格、制表符和换行符)被视为一个空白字符:

For all HTML elements except PRE, sequences of white space separate "words" (we use the term "word" here to mean "sequences of non-white space characters"). When formatting text, user agents should identify these words and lay them out according to the conventions of the particular written language (script) and target medium.

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

So

所以

foo    bar

is displayed as

是显示为

foo bar

But no-break space is always displayed. So

但是不间断的空间总是显示出来的。所以

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

is displayed as

是显示为

foo   bar

#7

There are a lot of different types of spaces, such as thin space, em space, non breaking space... Jon Tan has made a writeup of the most common ones at his blog.

有很多不同类型的空间，比如空间狭小，空间空间，不破坏空间……Jon Tan在他的博客上写了一篇最常见的文章。

#8

You can see a working example here:

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

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

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

and

和

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

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

Same div, same text, different "spaces"

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

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

vs

vs

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

#9

The first is not treated as white space by the HTML parser, the second is. As a result the " " is not guaranteed to showup within certain HTML markup, while the non breakable space will always show up.

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

#10

@Zoidberg is right, example:

@Zoidberg是正确的,例如:

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

will not display space between header markup, with

在头标记之间不会显示空格?

& nbsp ; 

will do space :)

会做空间:)

#11

  should be handled as a whitespace.

,应该作为空格处理。

   should be handled as two whitespaces

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

' ' can be handled as a non interesting whitespace

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

' ' + ' ' can be handled as a single ' '

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

#12

When having line-breaks, the line will not break when you use an $bnsp; because it's a 'non-breaking space'. This can be important if you have certain product-names or such, that always shall be written together.

当你使用一个$bnsp时，当你有线路中断时，线路不会中断;因为这是一个“不间断的空间”。如果你有特定的产品名称或者类似的产品，这一点很重要。

Can be interesting if you (have to) use a whitespace as delimiter in numbers, like 12344567, that is displayed 12 344 567 in France. Without the   the line would break in the middle of the number, very ugly. Test:12 344 567

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

#13

  is stackable, meaning you can create multiple spaces all together.

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

HTML will only parse one space '' and it drops the rest...

HTML只会解析一个空间，它会把剩下的…

If you want five spaces, you would place 5 x  

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