white-space 是css属性，用于控制元素内空格、换行符、制表符的处理方式及换行行为；其常用值包括 normal（合并空白、自动换行）、nowrap（禁止换行）、pre（保留所有空白并禁换行）、pre-wrap（保留空白且允许换行）、pre-line（合并空白但保留换行）和 break-spaces（保留所有空白并可在任意空格处换行）。
用 white-space 控制换行与空白处理
HTML 默认会把多个空格、制表符、换行符全压成一个空格，所以直接敲回车或写 \n 不会生效。真正起作用的是 CSS 的 white-space 属性，它决定了浏览器怎么“读”这些空白字符。
常见取值和效果：
-
white-space: normal：默认行为，合并空白，只在空格/标点处换行 -
white-space: pre-line：保留换行符（\n），但合并连续空格；适合从后端返回的带换行的纯文本，比如用户评论 -
white-space: pre-wrap：既保留换行符和空格，又允许长行自动折行；适合需要保留缩进又不能溢出容器的场景，如代码片段预览 -
white-space: pre：完全按源码渲染，空格、换行、缩进全保留；但容易水平溢出，必须配overflow-wrap: anywhere或word-break: break-all
为什么 <br> 不该用来分段
<br> 是行内换行符，语义上只表示“这里换一行”，不构成新段落。滥用会导致结构混乱、可访问性下降，屏幕阅读器可能跳过它，SEO 也不识别其语义。
典型误用场景：
- 用多个
<br>模拟段间距 → 应改用<p></p>+ CSSmargin - 在地址栏里堆
<br>→ 可以，这是合理用法，因为地址是单一段落内的逻辑分行 - 在富文本编辑器输出中直接插
<br>→ 风险高，若内容含用户输入的\n，需统一转为white-space: pre-line更可靠
处理后端返回的 \n 换行符要小心
从 API 或数据库拿到的字符串里有 \n，但直接塞进 textContent 不会换行；塞进 innerHTML 并加 white-space: pre-line 才有效。
安全与兼容要点：
- 不要用
.innerHTML = text.replace(/\n/g, '<br>')
—— 有 XSS 风险，且破坏语义 - 推荐做法：保持
textContent渲染，再用 CSS 控制，例如<div style="white-space: pre-line">{{ text }}</div> - 如果文本含 HTML 标签（如富文本），且你信任来源，才考虑
v-html（Vue）或dangerouslySetInnerHTML（React），但仍需配合white-space - 注意：IE11 不支持
white-space: break-spaces，但pre-line和pre-wrap全平台稳定
长单词和 URL 溢出时必须叠加 overflow-wrap
仅设 white-space: pre-wrap 无法解决超长无空格字符串（如 base64、JWT、URL）的溢出问题，它们会撑破容器。
正确组合写法：
-
white-space: pre-wrap; overflow-wrap: anywhere;—— 推荐，现代浏览器支持好，换行时机更自然 -
white-space: pre-wrap; word-break: break-all;—— 强制断字，适合 CJK 或调试场景，但英文会切开单词 - 避免只写
overflow-wrap: break-word（已废弃），应使用标准值anywhere
真正容易被忽略的是：这些属性必须作用在**有明确宽度限制的容器**上，否则浏览器没触发换行的依据。比如父元素 width: 100% 但外层没定宽，效果就不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
