27

使用 ag-grid，有没有办法将长标题拆分为 2 行...

columnDefs headerName: 中的一个中断'Long<br />Header' 让我走到了那里（使用开发工具我可以看到文本有 br），但是周围元素之一的高度为 25px；<div class="ag-header" style="height: 25px;">我认为这会导致标题的第二行不显示。

我想知道使用组标题作为临时分割文本，但长期（当我需要分组时）这不是一个选项......

4

7 回答 7

19

尝试将以下内容添加到您的 CSS 中：

.ag-header-cell-label {
    text-overflow: clip;
    overflow: visible;
    white-space: normal;
}

并将其添加到您的网格选项中：

headerHeight: 48
于 2015-12-17T11:54:20.293 回答
11

使用 ag-grid@15.0.0，只有以下解决方案有效：

.ag-header-cell-label .ag-header-cell-text {
  white-space: normal !important;
}

这是我第一次真正需要使用 css 的工作!important。

于 2018-03-24T13:37:04.957 回答
7

对我来说，使用 and 的组合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();
            }
        };
于 2018-03-23T13:24:21.607 回答
5

把它放在网格选项中

标头高度：50

在 style.css 中

.ag-header-cell-label .ag-header-cell-text {
    white-space: normal !important;
 }
于 2020-05-16T11:51:22.023 回答
5

对我来说，上述解决方案均无效。对我有用的是将 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",
于 2018-09-28T16:45:12.167 回答
4

如果您需要在标题中的某个位置换行，您可以使用它white-space: pre来实现此目的。将此添加到 CSS（如果您使用不同的主题，请更改主题）：

.ag-theme-material .ag-header-cell-label .ag-header-cell-text {
  white-space: pre;
}

\n然后相应地在您的标题名称中添加字符。您还必须确保有足够的高度使用gridApi.setHeaderHeight()和gridApi.setGroupHeaderHeight()

于 2019-10-16T10:07:42.447 回答
0

您可以尝试以下css：

.ag-header-group-text,
.marginright-xs {
  white-space: pre-wrap;
}
于 2021-07-22T16:14:01.467 回答