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

目录

一、问题

二、解决方案

1.样式方案解决

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

---

 我的博客原文：https://code-nav.top/article/979

一、问题

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

然后测试小姐姐就找到了我，说是粘贴复制有数据丢失，然后。。。就。。。喜提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！ 欢迎在评论区交流。

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

往期回顾

css实现元素居中的6种方法

Angular8升级至Angular13遇到的问题

前端vscode必备插件(强烈推荐)

Webpack性能优化

vite构建如何兼容低版本浏览器

前端性能优化9大策略（面试一网打尽）！

vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 vite构建打包性能优化

 vue3.x使用prerender-spa-plugin预渲染达到SEO优化

 ES6实用的技巧和方法有哪些？

 css超出部分显示省略号

vue3使用i18n 实现国际化

vue3中使用prismjs或者highlight.js实现代码高亮

什么是 XSS 攻击？什么是 CSRF？什么是点击劫持？如何防御