前端中的 ;

前端中的 ;nbsp 的全称是 no breaking space 意为非截断空白符 该符号与前后单词合并为一个单词 不应该被截断 除非设置 cssword break break all HTML 中的应用 html 会将多余的空白符合并为一个 如果需要在 html 里添加多余一个空白 就可以使用 nbsp

大家好,我是讯享网,很高兴认识大家。

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

HTML中的应用

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

比如,这里有一个段落

<p>Hello,everyone,my name is he zebing</p> 

讯享网

当盒子空间狭小时会发生这行,导致姓、名分处两行:
在这里插入图片描述
讯享网

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

讯享网<p>Hello,everyone,my name is he&nbsp;zebing</p> 

在这里插入图片描述

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

nbsp与空格的区别

这里的空格指的是通过键盘上的空格键敲出的字符,它是ASCII码表里的第32个字符:
在这里插入图片描述

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

<p>&nbsp;</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里就有以下补丁:
在这里插入图片描述

小讯
上一篇 2025-04-08 10:36
下一篇 2025-01-27 10:17

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/45547.html