bootstrap表格中默认为table-cell显示，text-truncate类无效；必须配合table-layout: fixed、显式宽度及overflow: hidden/white-space: nowrap/text-overflow: ellipsis三件套才能实现省略号截断。
直接说结论：Bootstrap 表格本身不自动处理内容截断，text-truncate 类对 <td> 无效；必须手动加 <code>table-layout: fixed + 宽度约束 + 三件套 CSS（overflow: hidden / white-space: nowrap / text-overflow: ellipsis），否则省略号不会出现。
为什么 text-truncate 加在 <td> 上没反应<p><code><td> 默认是 <code>display: table-cell，而 text-overflow: ellipsis 只对块级或 inline-block 元素生效。Bootstrap 的 text-truncate 类只包含三件套样式，但没改显示模式，也没设宽度——所以直接加在 <td> 上等于白加。<ul>
<li>必须显式设置 <code>width 或 max-width（比如用 w-100、max-w-50 等响应式类，或内联 style="width: 120px"）
table-layout: fixed 到 <table> 上，否则列宽由内容撑开，CSS 宽度声明会被忽略<li>如果用在 Bootstrap Table（如 <code>bootstrap-table 插件），列定义里要配 width 和 cellStyle，不能只靠 class
table-layout: fixed 是关键开关，但有副作用
不加它，浏览器按“自动布局”算列宽：先看内容长度，再分配空间，width 声明基本被无视；加了它，才真正按你写的 th 宽度或 col 宽度来切分表格。
- 副作用一：长文本可能被硬截断，哪怕内容其实能折行——因为
white-space: nowrap强制单行 - 副作用二：小屏幕下固定宽度列容易溢出容器，需配合
table-responsive包一层<div> <li>副作用三：<code>th里的文字若过长，也会被截断，建议给th单独加text-wrap或text-break类防标题失真 - 用原生
title时，务必先 trim 再赋值：$(this).attr("title", $(this).text().trim())，否则空格导致 tooltip 显示异常 - 用 Bootstrap Tooltip 需提前初始化：
$('[data-bs-toggle="tooltip"]').tooltip()，且<td> 要加 <code>data-bs-toggle和data-bs-title - 注意性能：表格行数多时，别在
onLoadSuccess里用each()遍历所有td，改用事件委托绑定到tbody - 纯 CSS 方案仅限 Chrome/Safari/Edge 新版，且必须配
display: -webkit-box+-webkit-box-orient: vertical+max-height - 真实项目中，更推荐 JS 判断：
if (el.scrollHeight > el.clientHeight * 1.8)，再截取文字 + 拼接…，兼容性零风险 - 别用字数截断（如
substr(0, 20)）：中英文混排、emoji、全角符号会让视觉长度和字数严重不匹配
鼠标悬停显示完整内容，别只靠 title
用 title 属性最简单，但体验差：延迟高、样式不可控、移动端不触发、中文标点常被截断。更稳的做法是监听 mouseenter，动态创建 tooltip 或用 Bootstrap 自带的 data-bs-toggle="tooltip"。
多行省略？CSS 不通用，JS 更可靠
text-overflow: ellipsis 天然只支持单行；想两行截断，得用 -webkit-line-clamp，但它在 Firefox、部分 WebView 和旧 Android 上完全失效。
最容易被忽略的是：表格列宽控制和内容截断必须同步做——光写 CSS 不加 table-layout: fixed，或者写了 fixed 却没给 th 或 col 设宽度，都会让省略号彻底失效。这不是 Bootstrap 的 bug，是 CSS 表格渲染模型本身的约束。
