word-break单独加在<td>上大概率没用，必须同时设置white-space: normal、容器有明确宽度（如width/max-width），并配合overflow-wrap: break-word或word-break: break-all才能生效。
word-break 单独加在 <td> 上大概率没用——它只是定义“在哪能断”，不是“要不要断”。真正起作用的是三件事：容器有明确宽度、white-space 允许换行、overflow-wrap 或 word-break 提供断点策略。
为什么 word-break: break-all 加了还是不换行？
常见失效不是属性写错，而是它根本没触发条件：
-
white-space: nowrap会彻底屏蔽所有自动换行，哪怕其他样式全对也白搭 -
<table>或<td>没设width/max-width，浏览器就不知道“边界在哪”，overflow-wrap就不会生效 - 用了
table-layout: fixed却没给<td>设width，表格列宽被锁死，内容只能横向拉伸 - 在
display: flex或display: grid的子项里，min-width: auto默认阻止收缩，必须显式加min-width: 0
word-break 和 overflow-wrap 到底怎么配？
它们不是替代关系，是分工协作：
-
white-space: normal：让空格、\n、连字符（-）这些默认断点生效（这是基础） -
overflow-wrap: break-word：现代标准，优先在正常断点换行；仅当内容撑出容器时，才断开长单词或 URL -
word-break: break-all：无条件允许任意字符间断行，适合展示哈希值、日志片段等无需语义的场景；但中文会被切成单字（如“你好世界”→“你好世 界”），慎用 -
word-break: keep-all：中文不断字，英文也不拆词，纯靠空格分隔；遇到无空格长串（如https://example.com/verylongpath）照样溢出
后端返回带 \n 的文本怎么还原换行？
浏览器默认把 <td> 里的换行符当空格处理。要还原原始换行，必须用语义安全的方式：
立即学习“前端免费学习笔记（深入）”；
- 用
white-space: pre-line：保留\n，但把多个连续空格合并为一个，末尾换行不生成空行 - 用
white-space: pre-wrap：完全保留空格和换行符，适合代码块、日志等需精确格式的场景 - 别用
<br>手动替换——破坏语义、难维护、XSS 风险高 - 想插入“可选断点”？用
<wbr>，它是软连字符，由浏览器决定是否真断，比硬塞更自然
最常被忽略的一点：换行不是 CSS “开关一开就自动发生”，它依赖布局上下文。没有宽度约束、没有正确的 white-space、没考虑 Flex/Grid 的 min-width 行为，再漂亮的属性组合也无效。
