必须同时满足 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 三个 CSS 条件，且作用于有明确宽度的内层容器（如 td-inner），否则省略号不生效；BootstrapTable 中推荐用 cellStyle + formatter 组合实现，并确保 formatter 返回 outerHTML 以兼容特殊字符和 XSS 防护。
bootstrap 表格列内容超长显示省略号的核心条件
必须同时满足三个 css 条件，缺一不可：white-space: nowrap、overflow: hidden、text-overflow: ellipsis。只加其中一两个，省略号不会出现——这是 80% 的人第一次写就失败的原因。
常见错误现象：文字被截断但没省略号；或者文字换行了，还撑开表格高度；又或者设置了 width 但列宽完全不生效（尤其在 BootstrapTable 中）。
-
white-space: nowrap是前提：强制单行，否则text-overflow不起作用 -
overflow: hidden必须作用在有明确宽度的容器上（比如<td>或其内部<div>），不能只写在父级<table> -
max-width比width更可靠，尤其在响应式布局中；若用width，需确认父容器未限制其收缩
BootstrapTable 中配置 cellStyle + formatter 的实操要点
直接在 columns 配置里写 cellStyle 控制样式、用 formatter 包一层 DOM 节点来挂 title，是最稳妥的组合。别试图只靠 CSS 类搞定悬停提示——原始值里含 <、{、空格等时会出错或被截断。
正确写法示例：
{
field: 'desc',
title: '描述',
width: '250px',
cellStyle: function (value, row, index, field) {
return {
css: {
'white-space': 'nowrap',
'text-overflow': 'ellipsis',
'overflow': 'hidden',
'max-width': '250px'
}
};
},
formatter: function (value) {
const span = document.createElement('span');
span.title = value || '';
span.textContent = value || '';
return span.outerHTML;
}
}
-
cellStyle返回的是对象，不是字符串；css属性名要用引号（如'max-width'），因为带横线 -
formatter必须返回字符串（outerHTML）或 DOM 节点，但返回节点在某些版本 BootstrapTable 中可能触发渲染异常，优先用outerHTML - 如果
value含 HTML 标签或特殊字符，textContent比innerHTML安全，避免 XSS 和解析错误
为什么单纯加 class 在 th/td 上经常失效
因为 BootstrapTable 渲染后实际结构是：<th><div class="th-inner">标题</div></th> 和 <td><div class="td-inner">内容</div></td>。你写的 class 若只作用在 <th> 或 <td> 上，样式根本没落到真正承载文字的内层 <div> 上。
所以要么用 cellStyle（它自动作用于 td-inner），要么手动穿透写 CSS：
.bootstrap-table .fixed-table-body .table tbody td .td-inner {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 200px;
}
- 不要依赖
width属性控制列宽——BootstrapTable 的列宽计算受表头文字长度、data-card-view等影响极大 - 若用自定义 class，务必带上足够强的选择器权重（如上面例子），否则会被插件默认样式覆盖
- 移动端下
text-overflow: ellipsis对 flex 布局或某些字体可能不生效，建议加display: inline-block保底
多行省略（如最多显示 2 行+省略号）能不能用在表格里
能，但慎用。CSS 多行省略（-webkit-line-clamp）在 <td> 或 <div> 中可行，但它要求容器是块级、有固定高度，且会破坏表格的自动高度适应逻辑——可能导致整行高度塌陷或与其他行错位。
如果真要多行省略，推荐只用于非关键列，且显式设置 height 和 line-height：
.multi-line-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
line-height: 1.4;
height: 2.8em;
}
- 该方案在 Firefox 中需额外加
overflow: hidden+text-overflow: ellipsis才兼容 - 和
cellStyle配合时，要把这个 class 写进css对象里，而不是靠外部 class 名注入 - 一旦用了多行省略，
title悬停就变得更重要——因为用户无法滚动查看完整内容
