页面显示空格数和dom结构显示空格数不一致问题

一个空格引起前后端编码格式问题

今天在做业务的时候，测试那边发来一个bug，说我空格出现不完整，我看了一下这边页面，发现有空格啊，我回去跟测试说：有空格啊；然后测试给我发来一张图

e1a40087f1712e8f22a3ff7bd40ca05.png

wtf！！！这是什么鬼

然后我打开了一下调试窗口发现dom结构是正常的

f8ce379a1287df929fc4c3daad8410e.png

因为html会自动处理多个空格压缩成一个空格问题，因为后(s)台(b)没有使用   或者是 %20 进行转译，直接使用了空格

解决方案

没办法了后台大佬又不肯改，只能前端来修改了
下面是修改后的效果，完美

3.png

这里使用了<pre> 标签进行修改，下面是pre标签的c3s解释

定义和用法

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。

注意点

可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。
还需要注意pre标签格式问题，pre默认格式保留空格和换行符，呈现为等宽字体，下面是解决方法

pre {
  margin: 0;
  padding: 0;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  font-family: PingFangSC-Regular, PingFang SC;
}