使用 ag-grid，有没有办法将长标题拆分为 2 行...
columnDefs headerName 中的中断：'Long<br />Header'
让我走到了那里（使用开发工具，我可以看到文本有 br），但是周围元素之一的高度为 25px； <div class="ag-header" style="height: 25px;"> 我认为这会导致标题的第二行不显示。
我想知道是否可以使用组标题作为临时拆分文本，但长期（当我需要分组时）这不是一个选项...
【问题讨论】：
标签： ag-grid
尝试将以下内容添加到您的 CSS：
.ag-header-cell-label {
text-overflow: clip;
overflow: visible;
white-space: normal;
}
并将其添加到您的网格选项中：
headerHeight: 48
【讨论】：
overflow-wrap: break-word; 如果您有较长的单字标题（例如，如果您是德国人），也会有所帮助。
white-space: pre。
使用 ag-grid@15.0.0，只有以下解决方案有效：
.ag-header-cell-label .ag-header-cell-text {
white-space: normal !important;
}
这是我在 css 工作中第一次真正需要使用 !important。
【讨论】：
.ag-theme-material .ag-header-cell-label .ag-header-cell-text { height: auto; overflow-wrap: normal; white-space: normal; } 另一种更具体的方法是将您自己的类应用于列定义中的标题。所以有几种方法可以避免使用 !important。
对我来说，使用 angular@5.5.1 和 ag-grid@13.3.1 的组合，以下工作：
::ng-deep .ag-header-cell-text {
text-overflow: clip !important;
overflow: visible !important;
white-space: normal !important;
}
::ng-deep 是一个 Angular CSS 组合器（指令）。这是基于 Stian 的回答，不同之处在于，在我的情况下，它不是 .ag-header-cell-label，而是仅适用于 .ag-header-cell-text。
在网格选项对象中，您必须设置标题高度：
this.testGridOptions = <GridOptions>{
onGridReady: () => {
this.testGridOptions.api.setHeaderHeight(75);
this.testGridOptions.api.sizeColumnsToFit();
}
};
【讨论】：
!important
对我来说，上述解决方案均无效。对我有用的是将 headerHeight（在 GridOptions 中）设置为您指定的高度，然后添加以下内容：
.ag-header-cell-text {
overflow: visible;
text-overflow: unset;
white-space: normal;
}
就我而言，我不需要向 .ag-header-cell 包装类添加任何内容。
我正在使用以下版本：
"ag-grid-angular": "18.1.0",
"ag-grid-enterprise": "18.1.1",
【讨论】：
把它放在网格选项中
标题高度：50
在 style.css 中
.ag-header-cell-label .ag-header-cell-text {
white-space: normal !important;
}
【讨论】：
如果您需要在标题中的某个位置换行，您可以使用white-space: pre 来实现此目的。将此添加到 CSS（如果您使用不同的主题，请更改主题）：
.ag-theme-material .ag-header-cell-label .ag-header-cell-text {
white-space: pre;
}
然后将\n 字符相应地添加到您的标题名称中。您还必须使用gridApi.setHeaderHeight() 和gridApi.setGroupHeaderHeight() 确保有足够的高度
【讨论】：
你可以试试下面的css：
.ag-header-group-text,
.marginright-xs {
white-space: pre-wrap;
}
【讨论】：