HTML默认压缩连续空白字符为单个空格，Vue模板沿用此行为；静态内容用 ，动态文本用white-space控制，服务端数据需预先归一化。
Vue模板里写多个空格为什么只显示一个
HTML本身会把连续空白字符（空格、换行、制表符）压缩成单个空格，Vue的模板编译器默认沿用这一行为。哪怕你在里写了 或敲了四次空格加回车，最终渲染到页面上大概率还是一个空格。
用 还是用CSS white-space处理
两者适用场景不同，别混用：
-
-
white-space: pre或pre-wrap适合块级容器内保留原始换行和缩进，比如代码片段、日志输出 - 动态内容中硬塞
{{ item.name + ' ' + item.id }}在数据为空时会多出冗余空格 - 用
white-space: break-spaces能保留空格又允许折行，但IE完全不支持
v-html里空格被吃掉怎么办
即使用了v-html，浏览器仍按HTML规则解析字符串。如果后端返回的是带多个空格的纯文本，必须额外处理：
- 服务端返回前把空格转成
-
前端用
replace(/\s/g, ' ')手动转换，但注意别把换行符也替换成
） - 更稳妥的做法是包裹一层
并配white-space: pre-wrap，避免正则替换引入bug
const safeHtml = rawText .replace(/ /g, ' ') .replace(/\n/g, '
');
scoped样式下white-space失效的常见原因
Vue的scoped机制会给元素加属性选择器，但如果你写的是span { white-space: pre-wrap; }，这个规则可能没命中目标元素——因为实际渲染的span被加了data-v-xxx属性。
立即学习“前端免费学习笔记（深入）”；
- 显式给元素加class，比如
{{ text }}，再写.preserve-space { white-space: pre-wrap; } - 用
::v-deep（Vue 2）或:deep()（Vue 3）穿透作用域：:deep(span) { white-space: pre-wrap; } - 直接写
不加scoped，但要注意全局污染风险
空格问题看着小，但混在动态插值、v-html、scoped样式、服务端数据之间时，很容易漏掉某一层的处理。最稳的方式是：静态内容用 ，动态文本走CSS控制，服务端数据进来前先归一化格式。
