white-space属性控制空白符处理与换行行为：normal合并空格换行符并自动换行；pre-wrap保留所有空白符且允许自动换行；pre-line合并空格但保留换行符并自动换行；需配合overflow、word-break等实现完整文本控制。
white-space 属性直接决定连续空格和换行符是否被保留、合并或触发换行，选错值会导致文本塌缩、溢出或格式错乱。
white-space: normal 会吃掉所有多余空格和换行
这是默认行为，浏览器把多个空格、制表符、换行符全当成一个空格处理，且只在单词边界（英文）或任意字符位置（中文）自动折行。
- 适用场景：普通段落
、文章正文，不需要保留源码格式 - 常见错误：把用户提交的带缩进的评论用
normal渲染，结果所有缩进消失，段落粘连成一行 - 注意：
\n在 HTML 源码里写出来，normal下完全无效，不会换行
white-space: pre-wrap 是代码和日志的稳妥选择
它既保留你敲进去的所有空格、制表符、换行符，又允许长行在容器边缘自动折断，避免横向滚动条或内容溢出。
- 适用场景：后端返回的日志片段、前端展示的 JSON 响应、用户粘贴的带缩进代码
- 参数差异：
pre虽然也保留格式，但禁止自动换行，容易撑破容器；pre-wrap补上了这个短板 - 性能影响：比
normal略重（需解析并保留空白序列），但现代浏览器优化良好，无明显卡顿 - 示例：
div { white-space: pre-wrap; width: 300px; }—— 缩进和换行都留着，超宽时自动折行
white-space: pre-line 适合用户评论等“半结构化”文本
它会把连续空格压缩成一个，但保留换行符，并允许自动换行。效果接近“按段落显示”，又不保留无意义的缩进。
- 适用场景：富文本编辑器导出的纯文本、用户输入的多行留言、Markdown 渲染后的段落
- 容易踩的坑：如果原始文本里有
\n\n（空行），pre-line会保留它，但两个\n之间没有空格，可能渲染成紧挨着的两行，视觉上像没空行 —— 需配合line-height或额外margin调整 - 兼容性：IE8+ 支持，但 IE7 及怪异模式下退化为
normal
别忽略 overflow 和 word-break 的协同作用
white-space 单独不能解决所有换行问题。比如用 nowrap 时，必须配 overflow: hidden 和 text-overflow: ellipsis 才能显示省略号；而中文长串无空格文本（如一长串手机号），即使设了 pre-wrap 也可能不换行，得加 word-break: break-all 或 overflow-wrap: break-word。
-
word-break: break-all强制在任意字符处断行，适合纯数字/字母串 -
overflow-wrap: break-word优先在单词间断，实在不行才进单词里断，更友好 - flex 容器内嵌套
white-space: nowrap元素时，可能触发 flex 项目的最小宽度限制，导致布局异常 —— 这类组合要实测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
