white-space: normal 会合并空白符并自动换行，pre 则完全保留所有空白符且不自动换行；需折行时应选 pre-wrap 或配合 overflow-wrap/break-word。
white-space: normal 和 pre 的区别在哪
默认值 normal 会合并连续空格、制表符和换行符，只保留一个空格，并允许文本在容器边界处自动换行；pre 则完全保留所有空白字符（包括换行、缩进），且**不自动换行**，超出容器宽度会撑宽父元素或出现水平滚动条。
常见误用是以为 pre 能“保留换行+自动折行”，其实它不折行。需要折行得配合 pre-wrap。
-
normal：适合常规段落，但粘连的多个空格会被压成一个 -
pre：适合代码块、日志原始输出，但需手动加<br>或控制宽度防溢出 -
pre-wrap：保留换行和空格，同时允许在空格/连字符处折行——日常最实用的组合
让长英文单词或 URL 自动断行用什么值
仅靠 white-space 无法解决长无空格字符串（如 https://example.com/verylongpathwithnospaces）的换行问题。必须搭配 word-break 或 overflow-wrap。
white-space: normal + overflow-wrap: break-word 是最稳妥的组合：前者允许折行，后者在必要时强制在单词内断开；word-break: break-all 更激进，会在任意字符间断行（包括中文词中），慎用。
立即学习“前端免费学习笔记（深入）”；
code {
white-space: normal;
overflow-wrap: break-word;
word-break: normal; /* 避免和 break-all 冲突 */
}textarea 里按 Enter 换行但显示不生效？
HTML 中 <textarea> 默认保留换行（内部值含 \n），但渲染到页面其他元素（比如 <div>）时，\n 不被识别为换行，除非设置 white-space: pre-line 或 pre-wrap。
-
pre-line：合并多余空格，但保留换行符 → 把\n当成换行，空格缩进全丢掉 -
pre-wrap：既保留\n，也保留空格和制表符 → 更接近原始输入效果 - 若用 JS 动态渲染，记得把
\n替换成<br>，否则即使设了pre-line，纯文本节点也不会解析换行符
flex 或 grid 容器里 white-space 失效？
当文本在 display: flex 或 display: grid 的子项中时，如果该子项没有设置明确宽度（或 min-width），white-space: normal 可能表现异常——浏览器会优先收缩文本项宽度，导致看似“不换行”或“空格消失”。
根本原因是 flex/grid 子项默认 min-width: auto，会阻止内容换行以维持最小尺寸。解决方案很简单：
- 给文本容器加
min-width: 0（flex 子项）或min-width: 0/overflow: hidden（grid 子项） - 确保
white-space值本身合理（比如别在窄容器里用pre） - 避免对文本元素同时设
white-space: nowrap和期望它换行——这是自相矛盾的
空格和换行不是独立存在的样式开关，它依赖于容器尺寸、布局上下文和相邻属性共同作用。调的时候先看盒模型是否被 flex/grid 暗中锁死，再查 white-space 值是否匹配预期行为。
