table td 不换行需综合设置：white-space: normal（或pre-wrap）、max-width、overflow-wrap: break-word、table-layout: fixed，并在Flex子元素中添加min-width: 0。

table td 不换行？先检查 white-space: nowrap

表格单元格默认支持换行，但很多 UI 框架（如 Bootstrap 4+）或 CSS 重置会偷偷给 td 加上 white-space: nowrap，结果一串 URL 或身份证号死活不折，表格被拉宽、出现横向滚动条。

修复很简单：显式覆盖它。

• 必须写 white-space: normal 或 white-space: pre-wrap（后者保留原始换行符）
• 仅设 white-space 不够——还得配合宽度约束，比如 max-width: 200px，否则浏览器没“边界感”，不会触发折行
• 别只靠 word-break: break-all 强行切字，中文会断在“用”和“户”之间，可读性直接崩

overflow-wrap: break-word 是处理无空格长串的底线

遇到 https://example.com/very/long/path/with/no/spaces 或一整段中文“北京市朝阳区建国路8号SOHO现代城D座12层”，浏览器默认不换行——这不是 bug，是规范行为。

overflow-wrap: break-word（旧名 word-wrap: break-word）才是安全解法：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

立即学习“前端免费学习笔记（深入）”；

• 它只在整词放不下时才断，不会把“用户协议”切成“用 户 协 议”
• 必须和 white-space: normal 配合使用；若用了 pre 或 pre-line，它可能失效
• 注意：IE 只认 word-wrap，现代浏览器两者都支持，建议同时写上

table-layout: fixed 是稳定换行的前提

哪怕你写了 overflow-wrap 和 max-width，如果表格本身是自动布局（table-layout: auto），列宽仍会随内容膨胀，换行逻辑形同虚设。

• 加一句 table { table-layout: fixed; }，让列宽由 col、第一行 td 或 CSS width 决定
• 之后再对 td 设 max-width，浏览器才有明确的“折行触发点”
• 慎用 width: 100% 在 td 上——它可能和 table-layout: fixed 冲突，优先用 max-width

Flex 容器里的 td 文字不换行？缺了 min-width: 0

如果你把 td 套进 display: flex 的父容器里（比如为了垂直居中），哪怕写了 overflow-wrap: break-word，文字还是溢出——90% 是因为子元素没设 min-width: 0。

• Flex 子项默认 min-width: auto，会阻止内容收缩，换行被锁死
• 修复只需在文本所在元素（比如 td 内的 div）加 min-width: 0
• 就算用了 flex: 1，这个 min-width: 0 也不能省——它是换行生效的开关

复杂点在于：这些属性不是孤立起效的。比如 pre-wrap 和 text-overflow: ellipsis 天然互斥，table-layout: fixed 会让 colspan 行为变微妙，而 min-width: 0 在嵌套 Flex 中容易漏掉层级。调的时候得一层层确认作用域。