文本超出容器不换行的主因是 white-space 被设为 nowrap/pre，或 flex/grid 中子元素 min-width: auto 阻止收缩；需检查 computed styles，重置 white-space: normal、overflow-wrap: break-word 及 min-width: 0。
文本超出容器不换行？先确认 white-space 设置
默认情况下，HTML 文本在容器内会自动换行，但一旦你或框架（比如某些 CSS 重置、Bootstrap 的 .text-nowrap）设置了 white-space: nowrap 或 white-space: pre，就会禁用换行。这是最常见却容易被忽略的根源。
检查开发者工具中元素的 computed styles，重点看 white-space 值。如果是 nowrap、pre 或 pre-line（注意：它只在换行符处换行，不处理长单词），就可能出问题。
-
white-space: normal（默认）：允许空格和换行符触发换行，也支持英文单词内断行（通过word-break或overflow-wrap控制） -
white-space: pre-wrap：保留空格和换行符，同时允许自动换行 —— 适合显示带格式但又需适应容器的文本 - 避免无意识继承：父级设了
white-space: nowrap，子级没重置，整个段落都“锁死”
中文/长英文单词不断行？靠 overflow-wrap 或 word-break
即使 white-space 正确，纯中文或超长 URL、文件路径（如 /usr/local/share/fonts/truetype/dejavu/DejaVuSans.ttf）仍可能溢出容器，因为浏览器默认只在空格或标点处断行。
此时需显式启用“任意位置断行”。优先用 overflow-wrap: break-word（语义清晰，兼容性好），次选 word-break: break-all（更暴力，可能把“iPhone”切成 “iPho/ne”）。
立即学习“前端免费学习笔记（深入）”；
-
overflow-wrap: break-word：仅在必要时（内容超宽）才在单词内断行，对中文友好（每个汉字都是“可断点”） -
word-break: break-all：无视词边界，强制断行 —— 少用，尤其含英文混合文本时易读性差 - 不要混用：
word-break: break-word是旧写法，已废弃，实际无效 - 示例 CSS：
.text-container {<br> white-space: normal;<br> overflow-wrap: break-word;<br>}
Flex/Grid 容器里文字不换行？检查 flex-shrink 和 min-width
在 display: flex 或 display: grid 的布局中，子元素（比如 <p>）默认有 min-width: auto，会阻止收缩换行，导致整块文本撑开容器。
这不是换行逻辑失效，而是弹性项拒绝变窄 —— 换行的前提是容器宽度足够小，而它被“锁住”了。
- 给文本元素加
min-width: 0（flex item）或min-width: fit-content（grid item），释放收缩能力 - 确认没有意外设置
flex-shrink: 0（等价于不缩小） - 若用
flex: 1，它隐含flex-shrink: 1，通常够用；但若父容器没设宽度，仍需配合max-width或width - 验证方式：临时加
border: 1px solid red看文本容器是否真占满可用空间
移动端 Safari 不生效？留意 -webkit-line-clamp 的副作用
如果用了 -webkit-line-clamp 实现多行省略（例如三行后加 …），它依赖 display: -webkit-box，而这会覆盖原有换行行为 —— 导致即使内容很短也不换行，或换行异常。
这不是 bug，而是该私有属性的设计限制：它把内容当作单行盒模型处理后再截断。
- 仅当明确需要“行数限制 + 省略”时才用
-webkit-line-clamp，否则优先用overflow-wrap+line-height控制高度 - 若必须用省略，确保父容器有明确
height或max-height，且未与其他换行控制（如white-space: nowrap）冲突 - 现代替代方案：
display: -webkit-box已被line-clamp标准属性逐步取代，但目前仍需前缀兼容
white-space 被覆盖，或 flex 容器里忘了 min-width: 0。真正需要调 overflow-wrap 的，往往是后台吐出的长 token 或日志路径 —— 这些地方别硬靠 JS 截断，CSS 一行就能解决。 
