表格长文本不换行的根本原因是 white-space、table-layout 和 overflow-wrap 未协同配置；需设 table-layout: fixed + width，white-space: normal，overflow-wrap: break-word，并注意 min-width: 0 和继承覆盖。

表格里长文本不换行，不是内容太长，而是 white-space、table-layout 和 overflow-wrap 没配对好。光加 overflow-wrap: break-word 没用，必须三者协同。

为什么加了 overflow-wrap: break-word 还是不换行

常见错误现象：表格单元格里塞了一串 URL 或中文长串，样式写了 overflow-wrap: break-word，但文字依然横向撑开、列宽崩坏、滚动条乱跳。

• 浏览器开发者工具里检查 td 的 computed white-space 值——大概率是 nowrap，来自 Bootstrap 4+、Tailwind 默认重置或自定义 CSS 覆盖
• white-space: nowrap 优先级高于 overflow-wrap，它直接锁死所有自动换行逻辑
• table-layout: auto（默认值）下，浏览器按内容撑列宽，max-width 形同虚设，断词无边界可依
• td 没设明确宽度约束（width 或 max-width），换行计算根本不会触发

table-layout: fixed 必须显式启用

这是整个换行逻辑的启动开关。没有它，col 定义、td 的 width、max-width 都无法真正生效。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 给 table 加 table-layout: fixed，同时配 width（比如 width: 100% 或具体像素值）
• 用 <col> 标签定义列宽比在每个 td 上写 width 更稳定，尤其有 colspan 时
• 避免只靠 max-width：在 table-layout: fixed 下，max-width 不控制列宽，必须用 width 或 <col>

td 的换行样式组合不能漏项

单靠一个属性解决不了问题。现代推荐组合是显式、语义清晰、兼容性稳的三件套：

• 重置空白符行为：white-space: normal（别用 pre 或 pre-wrap，会破坏表格默认对齐）
• 安全断词：overflow-wrap: break-word（优先在 /、.、- 处折，不切单词，“https://api.example.com” 变成两行，不是 “https:/” + “/api.example.com”）
• 宽度约束：max-width: 200px（数值按实际列宽定），且该值需与 <col> 或父 table 的宽度策略一致
• 如果 td 内嵌了 div 或 p，且父容器是 display: flex 或 grid，必须给那个子元素加 min-width: 0——否则 Flex 默认的 min-width: auto 会阻止收缩，换行失效

单行省略（text-overflow: ellipsis）和换行互斥

想让单元格只显示一行、超长变 …？这和自动换行是两条路，不能混用。

• text-overflow: ellipsis 只在 white-space: nowrap 下生效，而 nowrap 会禁掉所有换行逻辑
• 必须组合：white-space: nowrap + overflow: hidden + text-overflow: ellipsis
• 不能和 overflow-wrap、word-break、pre-wrap 共存，否则 ellipsis 不触发
• iOS Safari 对 text-overflow 支持弱，建议加 display: block 确保生效

最容易被忽略的是 white-space 的继承覆盖链，以及 min-width: 0 在 Flex 嵌套下的强制作用——这两个点不处理，其他样式全白调。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！