一个空格引起前后端编码格式问题
今天在做业务的时候，测试那边发来一个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;
}
