如何实现LWC Lightning Datatable表头文本换行？

你已经通过wrapText: true实现了数据行的文本换行，但该属性仅作用于数据单元格，表头的换行需要通过自定义CSS或列标签配合样式来实现，以下是两种可行方案：

方案一：全局自定义CSS实现表头自动换行 #

在组件的CSS文件中添加以下样式，覆盖表头单元格的默认不换行样式：

.custom-datatable th.slds-cell-fixed {
    white-space: normal !important;
    word-wrap: break-word;
}

你的模板中已经给datatable添加了custom-datatable类，无需修改模板代码，添加上述CSS后，所有表头文本会根据单元格宽度自动换行。

方案二：指定位置换行（结合换行符与CSS） #

如果需要在表头的特定位置手动换行，可按以下步骤操作：

1. 在列定义的label中插入换行符\n：

columns = [
    { label: '客户基本\n信息', fieldName: 'CustomerInfo', wrapText: true },
    // 其他列配置...
];

2. 在组件CSS文件中添加样式，让表头识别换行符：

.custom-datatable th.slds-cell-fixed {
    white-space: pre-line !important;
}

这种方式可以精准控制表头文本的换行位置，适合需要固定排版的场景。

说明 #

wrapText属性仅针对数据行的<td>元素生效，表头的<th>元素默认使用slds-cell-fixed类强制不换行，因此需要通过自定义CSS覆盖该样式规则来实现表头换行。

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