如何在Datatable中设置列内容自动换行而非溢出隐藏

问题成因 #

DataTable 默认给单元格附加 white-space: nowrap 样式，叠加横向滚动（scrollX: true）、自动宽度配置的冲突，会导致长文本强制不换行、撑出横向溢出。

实现步骤 #

1. 修改 DataTable 初始化配置 #

调整 JS 配置，给目标列（医院名称列，索引为 0）绑定自定义类、指定宽度规则，替换原有全列默认配置：

$(document).ready(function() {
    $('#example').DataTable({
        autoWidth: false,
        columnDefs: [
            // 给所有单元格绑定通用换行类
            {
                targets: '_all',
                className: 'dt-wrap-cell'
            },
            // 单独配置医院名称列（第一列，索引0）
            {
                targets: 0,
                width: '25%',
                className: 'hospital-name-col'
            }
        ],
        paging: false,
        responsive: true,
        scrollX: false, // 若必须保留横向滚动，可直接删除这行，不影响下方CSS效果
        info: false
    });
});

2. 新增 CSS 覆盖默认样式 #

在页面样式块或全局样式中添加以下规则，强制允许目标列文本换行：

/* 清除DataTable默认单元格不换行规则 */
table.dataTable td.dt-wrap-cell {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* 医院名称列专属换行规则 */
table.dataTable td.hospital-name-col {
    white-space: normal !important;
    word-break: break-all; /* 适配中英文混合长名称的强制换行 */
    min-width: 180px;
    max-width: 280px; /* 限制列最大宽度，避免挤占其他列空间 */
}

3. 可选对齐优化 #

同步配置第一列表头的宽度，保证表头和内容列对齐：

table.dataTable thead th:nth-child(1) {
    min-width: 180px;
    max-width: 280px;
}

效果说明 #

• 超长医院名称会在设置的宽度范围内自动拆行完整显示，不会出现截断隐藏
• 不会撑出不必要的横向滚动条
• 其余列原有布局、交互逻辑不受影响

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