white-space: normal 会合并空白符并自动换行，pre 则完全保留所有空白符且不自动换行；需折行时应选 pre-wrap 或配合 overflow-wrap/break-word。
white-space: normal 和 pre 的区别在哪
默认值 normal 会合并连续空格、制表符和换行符，只保留一个空格，并允许文本在容器边界处自动换行；pre 则完全保留所有空白字符（包括换行、缩进），且**不自动换行**，超出容器宽度会撑宽父元素或出现水平滚动条。
常见误用是以为 pre 能“保留换行+自动折行”，其实它不折行。需要折行得配合 pre-wrap。
-
normal：适合常规段落，但粘连的多个空格会被压成一个 -
pre：适合代码块、日志原始输出，但需手动加 -
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 中 当文本在 根本原因是 flex/grid 子项默认 空格和换行不是独立存在的样式开关，它依赖于容器尺寸、布局上下文和相邻属性共同作用。调的时候先看盒模型是否被 flex/grid 暗中锁死，再查 white-space 值是否匹配预期行为。 默认保留换行（内部值含 \n），但渲染到页面其他元素（比如 \n 不被识别为换行，除非设置 white-space: pre-line 或 pre-wrap。
pre-line：合并多余空格，但保留换行符 → 把 \n 当成换行，空格缩进全丢掉pre-wrap：既保留 \n，也保留空格和制表符 → 更接近原始输入效果\n 替换成 pre-line，纯文本节点也不会解析换行符flex 或 grid 容器里 white-space 失效？
display: flex 或 display: grid 的子项中时，如果该子项没有设置明确宽度（或 min-width），white-space: normal 可能表现异常——浏览器会优先收缩文本项宽度，导致看似“不换行”或“空格消失”。min-width: auto，会阻止内容换行以维持最小尺寸。解决方案很简单：
min-width: 0（flex 子项）或 min-width: 0 / overflow: hidden（grid 子项）white-space 值本身合理（比如别在窄容器里用 pre）white-space: nowrap 和期望它换行——这是自相矛盾的
