根本原因是table默认table-layout:auto且缺乏宽度约束，导致word-wrap:break-word失效；需设table-layout:fixed、明确table宽度，并配合white-space:pre-line等样式协同生效。
为什么加了 word-wrap: break-word 还是不换行？
根本原因不是样式没写对，而是表格自身渲染机制在“拦路”。table 默认用的是 table-layout: auto，浏览器会先按内容撑开列宽，再决定是否折行——结果就是：宽度没被约束，换行根本不会触发。
常见错误现象：td 里塞了一长串 URL 或无空格中文，文字直接横向溢出、撑破容器、滚动条出现。
- 必须给
table显式设table-layout: fixed -
table或其父容器得有明确宽度（比如width: 100%或width: 600px） - 单独只给
td加word-wrap: break-word没用，它依赖父级宽度约束才能生效
td 里有换行符（\n）却不显示？
后端返回的文本含原始回车（比如用户评论），直接插进 td 里，浏览器默认把 \n 当空格处理，整段“塌”成一行——这不是 bug，是 HTML 渲染规则。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
white-space: pre-line：保留 \n 换行，同时合并多余空格，允许自动折行 - 别用
white-space: pre：虽然保留 \n，但禁止自动折行，长行直接横向溢出 - 更稳妥的组合：
white-space: pre-line; overflow-wrap: break-word; word-break: break-word;
响应式下表格换行突然失效？
移动端宽度变小，但 td 内容仍不折行，大概率是继承了框架或重置 CSS 里的 white-space: nowrap。
检查步骤：
- 用浏览器开发者工具选中
td，看 computed 样式里white-space最终值是不是nowrap - 很多 UI 库（如 Bootstrap 4+）默认给
td设了white-space: nowrap - 覆盖写法：
td { white-space: normal !important; }或更精准地：td { white-space: normal; }+ 提高选择器权重
要不要用 <br> 强制换行？
能不用就不用。硬塞 <br> 是语义污染：它把排版逻辑写死在内容里，破坏可维护性，也干扰屏幕阅读器和 SEO。
适用场景极少：
- 极少数需要精确控制断点的标题类文本（比如“CEO
of XYZ Inc.”） - 纯静态、无交互、不响应式的内部管理页
- 所有动态内容（评论、日志、API 返回字段）一律走 CSS 控制
真正难的不是写哪几行 CSS，而是确认 table-layout: fixed 是否生效、white-space 是否被覆盖、以及宽度约束有没有落到实际渲染的容器上——这三个点漏掉任何一个，换行都会静默失败。
