white-space: pre-wrap 是自适应布局中保留连续空格的首选方案，它既照源码保留空格和换行，又允许自动折行，适配移动端、多分辨率及动态字号；而 pre 会禁止换行导致横向溢出，不适用响应式场景。
white-space: pre-wrap 是自适应布局中保留连续空格的首选方案
直接用 堆砌空格在响应式场景下极易失效：字体缩放、换行点变化、中英文混排时宽度不一致，都会让“对齐效果”突然崩塌。而 white-space: pre-wrap 让浏览器照源码保留空格和换行，同时允许自动折行——这才是真正适配移动端、多分辨率、动态字号的解法。
- 必须加在包裹文本的容器元素上，比如
<div class="text-block">姓名： 张三</div>不如改用<div class="text-block" style="white-space: pre-wrap;">姓名： 张三</div> - 不要写成
white-space: pre：它禁止换行，长文本会横向溢出，破坏自适应 - 若内容来自 API 或用户输入，确保用
textContent赋值（而非innerHTML），避免未转义的被解析为标签
为什么不能在 flex / grid 容器里靠 对齐文字
在 display: flex 或 display: grid 的布局中， 会被当作普通内联内容参与对齐计算，但它的宽度受字体、字号、语言环境影响极大。中文下 常比英文窄，同一段代码在 iOS Safari 和 Chrome 上可能错位一两个像素。
- 想让“标签：值”右对齐，优先用 CSS 的
justify-content: space-between或text-align: justify+text-justify: inter-word - 若必须用空格占位（如表格式排版），改用
word-spacing或固定margin-left，语义更清晰、控制更稳定 -
100 px
<pre class="brush:php;toolbar:false;"></pre> 标签在自适应布局中要重置默认样式
<pre class="brush:php;toolbar:false;"></pre> 默认启用 white-space: pre 并强制等宽字体，这在响应式页面里会造成中文字体发虚、字号偏小、行高异常等问题。它不是“加空格工具”，而是“预格式化文本容器”，用错语义和样式都会反效果。
- 必须覆盖默认字体：
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - 必须重置 margin：
margin: 0;，否则上下间距在不同设备上差异明显 - 别把
<pre class="brush:php;toolbar:false;"></pre>套在<p></p>里——HTML 规范禁止块级标签嵌套在<p></p>中，浏览器会自动闭合，导致 DOM 结构意外断裂
React / Vue 中动态插入带空格文本的注意事项
框架模板语法会把 当作字符串字面量处理，但若通过 v-html 或 dangerouslySetInnerHTML 渲染服务端返回的文本， 可能被二次 HTML 解析或 XSS 过滤掉。更稳妥的方式是用 white-space: pre-wrap + textContent。
- 静态文案：直接写
- 动态内容：后端返回
"姓名： 张三"，前端用ref.textContent = data，再配合 CSS 控制空白行为 - 绝对避免在模板中拼接
{{ label }} {{ value }}—— 换行或空格数量不可控，也不利于 i18n
white-space 管空白怎么解析，font 和 layout 管它怎么显示。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
