关于Datatable.net表格中Bootstrap 4状态标签文本无法换行的技术咨询

针对你遇到的状态标签文本无法自动换行的问题，结合Bootstrap 4和DataTables的特性，我整理了几个可行的解决步骤：

1. 调整状态标签的CSS样式 #

你的自定义.label-inline样式目前是行内元素，这类元素默认不会主动换行，再加上过大的左右padding会进一步挤压文本空间。修改你的CSS代码如下：

.label.label-inline {
    width: 100%; /* 让标签占满所在单元格宽度 */
    display: inline-block; /* 赋予块级元素特性，支持换行和宽度设置 */
    white-space: normal; /* 取消强制不换行，允许文本自动换行 */
    word-wrap: break-word; /* 处理长单词/文本的换行 */
    padding: 0.2rem 1rem; /* 适当减小左右padding，避免文本过度挤压 */
    border-radius: 0.42rem;
}

.label.label-pill {
    border-radius: 0.42rem; /* 修正你之前写的none，保持圆角样式统一 */
}

关键说明： #

• display: inline-block让标签既能保留行内元素的特性，又能像块级元素一样设置宽度和换行规则；
• width: 100%确保标签适配所在单元格的宽度，文本会在单元格范围内自动换行；
• white-space: normal是核心，它会取消任何强制文本不换行的设置，让文本根据容器宽度自动折行。

2. 检查DataTables的列配置 #

如果你的DataTables初始化代码中给Status列（第8列，索引从0开始）设置了nowrap类或强制不换行的配置，需要移除它。示例代码如下：

$('#linetb').DataTable({
    columnDefs: [
        // 确保Status列没有强制不换行的设置
        { targets: 8, className: '' }
    ]
});

DataTables的nowrap类会给单元格添加white-space: nowrap样式，这会直接覆盖你标签上的换行设置，所以必须确保Status列没有启用这个配置。

3. 替换Bootstrap 4过时的.label类（可选但推荐） #

Bootstrap 4已经废弃了.label类，官方推荐使用.badge类实现状态标签。如果愿意调整，可以把标签的HTML改成：

<span class="badge badge-success font-weight-bolder badge-pill badge-inline mr-2">IN PROGRESS</span>

对应的CSS调整为：

.badge.badge-inline {
    width: 100%;
    display: inline-block;
    white-space: normal;
    word-wrap: break-word;
    padding: 0.2rem 1rem;
    border-radius: 0.42rem;
}

这样更符合Bootstrap 4的设计规范，也能避免旧样式带来的潜在冲突。

按照上述步骤调整后，状态标签内的文本应该就能正常自动换行了。

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