目录
一、问题
二、解决方案
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？什么是点击劫持？如何防御
