CSS通过word-break、overflow-wrap和white-space精准控制文本换行：word-break控制词内断行（如keep-all防中文断字），overflow-wrap在必要时软换行长单词，white-space管理空白与换行行为。
文字过长不换行，通常是因为容器宽度有限而文本默认不折行（尤其是一长串无空格字符，如URL、邮箱、连续英文或数字）。CSS 提供了 word-break、overflow-wrap（旧称 word-wrap）和 white-space 等属性来精准控制断行行为，关键在于选对属性及其值。
用 word-break 控制中文/英文混排的断行
word-break 主要影响“词内是否可断”，适合中英文混合或含长单词的场景：
- word-break: normal：按语言规则断行（中文在字间、英文在空格或连字符处），长英文单词仍可能溢出
- word-break: break-all：允许在任意字符间断行（包括中文单字之间、英文单词中间），适合强制压缩内容，但可能影响可读性
- word-break: keep-all：禁止在中文、日文、韩文内断行（只在空格或标点处断），英文单词仍不换行 —— 常用于避免中文被错误拆分
用 overflow-wrap（word-wrap）让长单词“软换行”
当需要保留单词完整性，又不想溢出容器时，优先用 overflow-wrap: break-word（推荐写法）或 word-wrap: break-word（兼容旧浏览器）：
- 它只在必要时才在单词内部断行（比如一行放不下整个 URL），不会像
break-all那样激进 - 需配合
width或max-width使用，否则无约束下不会触发换行 - 示例：.text { width: 200px; overflow-wrap: break-word; }
white-space 配合使用，避免意外空白折叠
如果文本里有空格、换行符或制表符，且你发现它们被合并或忽略，可能是 white-space 默认值（normal）在起作用：
立即学习“前端免费学习笔记（深入）”；
- white-space: normal：合并空白，允许换行（默认）
- white-space: nowrap：禁止换行，所有空白合并 → 这就是“不换行”的常见元凶，记得检查是否误设
- white-space: pre-wrap：保留空白与换行，同时允许文本在边界处正常折行，适合展示带格式的说明文本
实际组合建议（推荐写法）
多数业务场景下，兼顾可读性与容错性，推荐这样写：
- .cell { width: 240px; word-break: keep-all; overflow-wrap: break-word; } → 中文不断字，长英文 URL 可折行
- .log-text { white-space: pre-wrap; overflow-wrap: break-word; } → 保留原始缩进和换行，同时防溢出
- 若用 Flex/Grid 布局，记得给子元素加
min-width: 0，防止文本撑宽容器（这是常被忽略的布局陷阱）
