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

最新推荐文章于 2025-11-11 22:31:26 发布

原创最新推荐文章于 2025-11-11 22:31:26 发布 · 625 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html

本文探讨了因空格编码格式不一致导致的前后端显示问题，详细解析了HTML如何自动压缩空格，以及后端未正确转译空格所带来的影响。通过使用<pre>标签和CSS样式，前端成功解决了这一问题，确保了空格的正常显示。

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

今天在做业务的时候，测试那边发来一个bug，说我空格出现不完整，我看了一下这边页面，发现有空格啊，我回去跟测试说：有空格啊；然后测试给我发来一张图
在这里插入图片描述
wtf！！！这是什么鬼

然后我打开了一下调试窗口发现dom结构是正常的
在这里插入图片描述

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

解决方案

没办法了后台大佬又不肯改，只能前端来修改了
下面是修改后的效果
在这里插入图片描述

这里使用了<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;
}

标签

#html