Question

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

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

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

Answer 1

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

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

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

headerHeight: 48

Answer 2

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

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

这是我与css合作的第一次，我真的需要使用!important。

Answer 3

将其放入网格选项

headerHeight：50

in style.css

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

Answer 4

对我来说，以上解决方案均无效。对我有用的是将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",

Answer 5

如果需要在标题中的某个位置处换行，可以使用white-space: pre来实现。将其添加到CSS（如果使用其他主题，则更改主题）：

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

然后将\n个字符添加到标题名称中。您还必须使用gridApi.setHeaderHeight()和gridApi.setGroupHeaderHeight()

确保有足够的高度

Answer 6

对我来说，使用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();
            }
        };

Answer 7

你可以试试下面的css：

.ag-header-group-text,
.marginright-xs {
  white-space: pre-wrap;
}

如何在ag-grid中自动换行标题

7 个答案: