前端中的 ;

nbsp的全称是:no breaking space,意为非截断空白符,该符号与前后单词合并为一个单词,不应该被截断,除非设置cssword-break:break-all;

HTML中的应用

html会将多余的空白符合并为一个,如果需要在html里添加多余一个空白,就可以使用 
除了在内容里添加空白以外,还可以发挥非截断的效用

比如,这里有一个段落

<p>Hello,everyone,my name is he zebingp>

当盒子空间狭小时会发生这行,导致姓、名分处两行:
前端中的 ;_第1张图片

如果想让姓、名处同一行,就可以借助nbsp:

<p>Hello,everyone,my name is he zebingp>

前端中的 ;_第2张图片

可以看到由于空间狭小无法放下姓名,姓名作为一个单词整体折到下一行了。

nbsp与空格的区别

这里的空格指的是通过键盘上的空格键敲出的字符,它是ASCII码表里的第32个字符:
前端中的 ;_第3张图片

其Unicide码点(codePoint)为32;而nbsp的unicode码点(codePoint)为160。二者是不同的。

<p> p>
var spaceTypedStr = " ";
var nbspStr = document.querySelector('p').innerText;
console.log(spaceTypedStr === nbspStr) 
//output --> false

//获取space空格的码点
console.log(spaceTypedStr.codePointAt(0));
//output --> 32

//获取nbsp码点
console.log(nbspStr.codePointAt(0));
//output --> 160

因此不可以将nbsp与空格混为一谈;

正则里二者统一视为空白符

值得注意的是正则里的\s既可以匹配空格也可以匹配nbsp:

/\s/.test(" ")
//output --> true

//nbsp的码点值160 的16进制表示为:a0
/\s/.test("\xa0")
//output --> true

但不排除某些手机设备实现有出入,比如jQuery里就有以下补丁:
前端中的 ;_第4张图片

你可能感兴趣的:(html,css)