white-space: pre-wrap 是最常用且稳妥的选择，它既保留原始换行符和空格，又允许在容器边界自动折行，避免横向溢出；需配合 overflow-wrap: break-word 和 width/max-width 使用，且不支持 text-overflow: ellipsis。
white-space: pre-wrap 是最常用且稳妥的选择
要让 HTML 元素里的文本既保留原始换行符（\n）和空格，又不横向溢出容器，直接用 white-space: pre-wrap 就行。它不像 pre 那样硬扛不换行，也不像 normal 那样把换行符当空气——该留的留，该折的折。
常见错误现象：用 pre 显示用户评论或 API 返回的带换行字符串，结果在手机上出现横向滚动条，或者文字被截断看不见。
-
pre-wrap会原样渲染"Line1\n\nLine2"为两行，中间空行可见 - 它只在空格、制表符、换行符处断行，不会在单词中间切开
- IE9+ 原生支持，无需前缀；旧版 IE（如 IE8）不支持，但已基本退出主流场景
- 若文本来自 Word 粘贴或富文本编辑器，可能含大量无意义空格，此时应清洗数据，而非靠 CSS 补救
pre-line 和 pre-wrap 的关键区别在哪
pre-line 适合“只要换行、不要多余空格”的场景，比如用户输入的段落式评论；pre-wrap 则更忠实于源格式，连缩进、多空格都照单全收。
使用场景差异：
- 后端返回
" Hello\n World"（带缩进）→ 用pre-wrap，缩进保留 - 用户在 textarea 输入
"第一段。\n\n第二段。"→ 用pre-line更干净，连续空格会被压缩成一个 -
pre-line不保留行首/行尾空格，pre-wrap会；这点在对齐或代码片段里很关键
为什么不能只设 white-space 就完事
white-space: pre-wrap 只管“怎么处理空白”，不管“超出去怎么办”。单独使用容易导致布局意外，尤其在响应式容器中。
必须配合的属性：
-
overflow-wrap: break-word或word-break: break-word：防止长 URL 或无空格字符串撑爆容器 -
max-width或width：限定容器宽度，否则pre-wrap的换行点无法生效 -
overflow: hidden或auto：显式控制溢出行为，避免内容逃逸
注意：text-overflow: ellipsis 和 pre-wrap 无法共存——前者只作用于单行，后者天然允许多行。
break-spaces 是 pre-wrap 的增强版吗
break-spaces 是较新的值（Chrome 86+、Firefox 78+），它比 pre-wrap 多一个能力：行尾空格也能触发换行。但目前兼容性有限，移动端 Safari 支持滞后。
适用条件很具体：
- 需要保留所有空格（包括末尾空格）并确保它们参与换行逻辑
- 目标环境明确支持该值（如内部管理后台、可控 WebView）
- 不用考虑 IE 或旧版 Safari —— 它们直接忽略该值，退化为
normal
大多数情况下，pre-wrap 已足够；盲目升级到 break-spaces 反而增加兼容性风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
