表格内容不换行，90%是因为未设table-layout:fixed、缺少明确宽度约束和white-space:normal；仅写word-wrap:break-word几乎无效，因white-space:nowrap会压制所有换行逻辑，必须显式设white-space:normal并配合table-layout:fixed与列宽控制。

表格内容不换行，90% 是因为没给 <table> 设 <code>table-layout: fixed，且 <td> 缺少明确宽度约束和 <code>white-space: normal。只写 word-wrap: break-word 几乎一定失效。

为什么加了 word-break: break-all 还是不换行？

根本原因是 <td> 默认继承或自带 <code>white-space: nowrap，它会直接压制所有换行逻辑——哪怕你写了断词规则，浏览器也“视而不见”。

• 用开发者工具打开 Elements 面板 → 右侧 Computed → 搜 white-space，确认最终值是不是 normal 或 pre-wrap
• 必须显式给 <td> 加 <code>white-space: normal（别依赖默认）
• 检查父级容器（比如外层 <div>）是否误设了 <code>white-space: nowrap

  table-layout: fixed 是换行开关，不是可选项

  默认的 table-layout: auto 会让浏览器根据内容动态算列宽，此时所有换行 CSS（overflow-wrap、word-break）都会被忽略。

  • 给 <table> 加：<code>table-layout: fixed; width: 100%
  • 同时必须给列设宽：要么用 <col>，要么在第一行 <td> 上设 <code>width 或 max-width
  • 如果只设 td { max-width: 200px } 却没 fixed 布局，等于没写

  中英文混排该用 overflow-wrap 还是 word-break？

  现代场景下，overflow-wrap: break-word 是主力，word-break: normal 是搭档；word-break: break-all 只适合日志 ID、哈希值这类纯展示字段。

  
  Wechat HTML Publisher
  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。
  下载
  • overflow-wrap: break-word：判断“要不要断”——只在整词放不下时才断，比如长 URL 在 / 处折行
  • word-break: normal：定义“在哪能断”——中文按字、英文按空格/连字符，互不干扰
  • 别用 word-break: break-word：它不是标准值，Chrome 89+ 忽略，Safari 兼容差

  Flex 容器里嵌表格，文字还是溢出？

  这是隐形坑：Flex 子项默认 min-width: auto，它会阻止内部文本收缩换行，哪怕 table-layout: fixed 和 overflow-wrap 都写了。

  • 解决方法是给 <table> 本身加 <code>min-width: 0
  • 不是给 <td> 加，也不是给外层 <code><div style="display: flex"> 加 <li>尤其常见于 WebExtension 弹窗、侧边栏表格等布局中</li> <p>最易被忽略的一点：换行永远需要明确边界。没有 <code>width 或 max-width，浏览器优先拉伸内容而不是折行——这不是 bug，是渲染引擎的基本行为。