如何设置BootstrapTable列宽并截断溢出的长文本？

一、CSS修复方案 #

你当前的CSS缺少单行截断的核心属性，补充后即可生效。修改后的CSS如下：

.set-width {
    min-width: 100px;
    max-width: 100px;
    white-space: nowrap; /* 强制文本不换行 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    overflow: hidden; /* 隐藏超出容器的内容 */
}

/* 确保tbody中的单元格也应用样式（BootstrapTable动态渲染tbody，需明确指定） */
#items tbody td.set-width {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

原理：white-space: nowrap禁止文本换行，text-overflow: ellipsis让超出部分显示省略号，overflow: hidden隐藏溢出内容，三者配合才能实现单行截断效果。

二、BootstrapTable内置参数方案 #

除了CSS，也可以利用BootstrapTable的内置参数实现需求，更贴合组件用法：

1. 使用data-cell-style设置单元格样式 #

在Description列的<th>上添加data-cell-style参数：

<th data-field="Description" data-sortable="true" class="set-height set-width text-start" data-cell-style="descriptionCellStyle">Description</th>

然后在页面中定义对应的JS函数：

function descriptionCellStyle(value, row, index) {
    return {
        css: {
            'min-width': '100px',
            'max-width': '100px',
            'white-space': 'nowrap',
            'text-overflow': 'ellipsis',
            'overflow': 'hidden'
        }
    };
}

2. 使用data-formatter自定义格式化（带悬浮提示） #

如果需要鼠标悬停显示完整文本，可以用格式化函数实现：

<th data-field="Description" data-sortable="true" class="set-height set-width text-start" data-formatter="descriptionFormatter">Description</th>

对应的JS函数：

function descriptionFormatter(value) {
    if (!value) return '';
    // 用span包裹文本，添加title属性显示完整内容，同时应用截断样式
    return `<span title="${value}" style="display: inline-block; min-width: 100px; max-width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">${value}</span>`;
}

内容的提问来源于stack exchange，提问作者TC_Guy