table-layout: fixed 下 td 被长字符串撑破，是因为该属性仅按声明宽度分配列宽，不控制内容换行；需同时设置 white-space: normal 和 overflow-wrap: break-word，并确保 col 使用 style="width: 120px" 正确声明宽度。

table-layout: fixed 开启了，列宽也设了，但一放长 URL 或中文连续字符串， 还是被顶破——这不是 bug，是文本行为没管住。

为什么 fixed 布局下 还是撑开？

根本原因是：table-layout: fixed 只负责“按你给的宽度切列”，不负责“内容怎么排”。只要单元格里有无空格长串（比如 https://example.com/very-long-path-with-no-spaces 或 xxxxxxxxxxxxxxxxxxxxxx），默认 white-space: normal 也拒绝换行——浏览器会把它当一个不可分割的“词”往外顶。

常见错误现象：

• 开发者工具里看到 计算宽度远超 声明值
• 明明写了 style="width: 120px"，实际渲染却 200px+
• 加了 word-wrap: break-word 没反应——大概率被框架样式覆盖了 white-space

white-space 和 overflow-wrap 必须配对用

单设 overflow-wrap: break-word 不起作用，前提是 white-space 得允许换行。很多 UI 库（如 Bootstrap 4+）或重置 CSS 默认给 加了 white-space: nowrap，直接锁死换行逻辑。

正确做法（必须同时写）：

• td { white-space: normal; } —— 解除换行封锁
• td { overflow-wrap: break-word; } —— 安全断词（比 word-break: break-all 强，不会把“订单号”切成“订”“单”“号”）
• 如果要单行省略，改用：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但前提是该 已有明确宽度（来自 或 width）

  的 width 写法容易错

  在所有现代浏览器中已失效，它不报错，但也不生效。你看到列宽没锁住，十有八九栽在这儿。

  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载

  必须用 CSS style：

  • ✅ 正确：
  • ✅ 正确：（但要求 有明确 width，如 width: 100%）
    ⚠️ 注意：
    必须是 的直接子元素，不能塞在 里

    固定列宽三要素缺一不可

    只做其中一两步，

    依然会撑破：

    • —— table-layout: fixed 必须显式写在 上，且 width 不能省
    或第一行

    /	带 width —— 提供列宽依据 td { white-space: normal; overflow-wrap: break-word; } —— 管住内容溢出行为 漏掉任意一条，fixed 就退化成 auto，内容一长，列宽就“活”过来。

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