它们都表示空间,但有区别吗?
一个是非间断空间,另一个是规则空间。非换行空格意味着该行不应该在该点被换行,就像它不会在单词中间被换行一样。
此外,正如Svend在他的评论中指出的那样,非间断空间并不是折叠的。
除了这里的其他答案外,非间断空格不会像常规空格那样被“折叠”。例如:
<!——都是——> < p > Word1 Word2 < / p > <!——和——> < / p > < p > Word1 Word2 <!——将在任何浏览器上呈现相同的效果——> <!—下图在渲染时保留空格。--> < p > Word1 ,,,,, Word2 < / p >
多个普通空格字符(空格、制表符和换行符)被视为单个空格字符:
对于除PRE之外的所有HTML元素,空格序列分隔“单词”(我们在这里使用术语“单词”来表示“非空格字符序列”)。当格式化文本时,用户代理应该识别这些单词,并根据特定的书面语言(脚本)和目标媒体的约定来布局它们。
So
foo bar
显示为
foo bar
但是始终显示无间断空间。所以
foo   bar
显示为
foo bar
如前所述,在有“无换行空格”的地方,您将不会收到换行符。
还要注意,只包含“”的元素可能会错误地显示,其中 将工作。至少在i.e. 6中(据我所知,IE7也有同样的问题),如果你有一个空的表格元素,如果没有内容,或者只有空白,它就不会对元素应用样式,例如边框。因此,下面的代码将不带边框:
<td></td>
<td> <td>
而边界将在本例中显示:
<td>& nbsp;</td>
嗯-不得不放一个虚拟空间,让它在这里正确渲染
实体 生成非换行空格,当不希望在该位置自动换行时使用该空格。常规空格的字符代码为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 There
</div>
例# 2:
<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
Hello There
</div>
和小提琴的链接。
你可以在这里看到一个工作示例:
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 ]</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 There</p>
然后它会呈现空间,就像你明确指示的那样。有一些使用这些空间进行样式化的历史。随着CSS的成熟,这种用法已经有所减少。然而,仍然有许多HTML字符实体的有效用途:避免意外/无意的解释(例如,如果你想显示代码)。w3有一个很棒的页面来显示其他字符代码。
推荐文章
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 点击下载Href图片链接
- HtmlSpecialChars在JavaScript中等价于什么?
- 我如何删除背景图像在css?
- 如何克服HTML表单嵌套的限制?
- 如何使Bootstrap 4卡在卡列相同的高度?