td文字不自动省略是因为缺少white-space: nowrap、overflow: hidden、text-overflow: ellipsis三者且无宽度限制；需为td添加该三属性及width/max-width，推荐用.text-truncate类精准控制。
Bootstrap表格中td文字不自动省略的常见原因
默认情况下，Bootstrap（v4/v5）的 table 和 td 没有设置 white-space: nowrap 或 text-overflow: ellipsis，即使你加了 overflow: hidden 也无效——因为省略号生效的前提是元素为块级或 inline-block 且有明确宽度限制，而 td 是 table-cell，其行为受表格布局约束。
必须同时满足的三个 CSS 条件
让 td 内文字超长显示省略号，需在目标单元格（或统一加在 td 上）设置以下三者，缺一不可：
-
white-space: nowrap：禁止换行，这是text-overflow: ellipsis的前提 -
overflow: hidden：隐藏溢出内容 -
text-overflow: ellipsis：触发省略号渲染
注意：td 默认是 table-cell 显示类型，它天然支持这三属性，无需改成 block 或 inline-block（改了反而可能破坏表格对齐）。
推荐写法：用 class 精准控制，避免污染全局 td
直接给 td 全局加省略样式会误伤需要换行的列（比如地址、描述字段），建议定义一个专用 class，例如 text-truncate（Bootstrap 本身已提供该类，但仅作用于 block 元素；需额外扩展到 td）：
.table td.text-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
然后在 HTML 中这样使用：
| 这是一段非常非常长的用户名字 | 正常可换行的备注信息 |
关键点：
- 务必配合
width或max-width（如style="width: 120px"或用 Bootstrap 的w-25等响应式类），否则没有“超长”判断依据 - 不要依赖
table-layout: fixed—— 它虽能强制列宽，但会牺牲自适应能力，多数场景不必要 - 如果用了 Bootstrap 5.3+，可直接用
text-truncate+fw-normal等组合，但依然要确保父td有宽度约束
IE11 及旧版 Edge 的兼容性坑
在 IE11 中，text-overflow: ellipsis 对 table-cell 支持不稳定，常出现省略号不显示或文字错位。临时解法是给 td 加 display: block，但这会破坏表格结构——更稳妥的做法是包裹一层 div：
<td> <div class="text-truncate" style="width: 120px;">超长文本</div> </td>
并配对应 CSS：
.text-truncate {
display: inline-block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
这种写法在所有现代浏览器和 IE11 均可靠，且不影响表格语义。
最易被忽略的是宽度控制——没设 width 或 max-width，再全的省略样式也等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
