html连续多个空格只显示一个空格的解决方法

目录

一、问题

二、解决方案

1.样式方案解决

2.使用正则替换转义字符

---

一、问题

最近在项目开发中遇到个奇怪的现象，用户往数据库存了中间有三个空格的数据，数据库存储正常，接口返回的数据也是带三个空格没问题，但是页面展示只有一个空格，现象如下：

然后测试小姐姐就找到了我，说是粘贴复制有数据丢失，然后。。。就。。。喜提bug。

下面我用两种方法解决这个问题。

二、解决方案

1.样式方案解决

元素添加这个样式：

white-space:pre

关于 white-space，具体参数如下：

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

看效果啦；

 2.使用正则替换转义字符

想要页面展示多个字符，可以使用实体字符&内部碎片；来代替空格，如下这样：name

'三个   字符' // 中间显示三个空格

那么我们可以将展示的变量中的空格，利用正则替换成实体字符，如下：

const str = '三个   字符'；
str.replace(/\s/g, ' ') // "三个   字符"

注意点：

替换成实体字符后将变量用innerHtml展示在页面中，否则浏览器无法识别哦。

问题完美解决，YYDS！ 欢迎在评论区交流。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

线上博客：富朝阳的博客