Ag grid 如何在ag网格中对标题进行文字包装

使用ag grid，有没有一种方法可以将一个长标题拆分为两行

列defs headerName中出现中断：

'Long
Header'

让我半路到那里（使用开发工具我可以看到文本有br），但是周围的一个元素的高度是25px<代码>，我认为这会导致标题的第二行不显示

---

我想知道是否可以使用组标题作为分割文本的过渡，但从长远来看（当我需要分组时），这将不是一个选项…

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

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

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

headerHeight: 48

---

对我来说，使用

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;
}

是一个角度CSS组合符（指令）。这是基于Stian的回答，不同的是，在我的例子中，它不是

.ag标题单元格标签

，而是只对

.ag标题单元格文本

起作用

在栅格选项对象中，必须设置标题高度：

this.testGridOptions = <GridOptions>{
            onGridReady: () => {
                this.testGridOptions.api.setHeaderHeight(75);
                this.testGridOptions.api.sizeColumnsToFit();
            }
        };

this.testGridOptions={
onGridReady:（）=>{
this.testGridOptions.api.setHeaderHeight（75）；
this.testGridOptions.api.sizeColumnsToFit（）；
}
};

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

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

---

这是我在css工作中第一次真正需要使用

！重要信息

对我来说，上述解决方案均无效。我所做的工作是将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",

---

如果需要在页眉的某个位置换行，可以使用

空白：pre

来实现这一点。将此添加到CSS（如果使用不同的主题，请更改主题）：

---

然后将

\n

字符相应地添加到标题名称中。您还必须使用

gridApi.setHeaderHeight（）

和

gridApi.setGroupHeaderHeight（）

将其放入网格选项中，以确保有足够的高度

人头数：50

在style.css中

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

---

看起来只有空白：正常是必需的这对我来说是有效的，但是现在由于菜单图标，我得到了一些对齐错误的文本。右侧的菜单图标将顶行向左突出。这会导致两行标题不在彼此顶部居中，而是向左偏移。有没有关于用它设计样式的建议？

overflow wrap:break word也会有所帮助。此选项不适用于ag-grid@15.0.0. 请参阅下面我的答案，以了解在此版本中可用的替代解决方案。如果要指定换行符出现的位置，请使用
空白：pre
。我使用的是ag-grid@15.0.0这种方法对我不起作用。我想我找到了答案。我将在下面发布我的解决方案。这对我很有效（ag-grid@21.0.1)仅当您将css放在组件级别时。如果您通过组件中的scss文件应用样式，则需要ng-deep。这对我来说很有效，即使没有
！重要信息
指定更具体的主题类，您应该避免使用！重要的。例如，
.ag主题材料.ag标题单元格标签.ag标题单元格文本{height:auto；overflow wrap:normal；white space:normal；}
另一种更具体的方法是将您自己的类应用于列def中的标题。所以有两种方法可以避免使用！重要信息。上述解决方案将帮助您拆分标题文本。如果我建议使用文本溢出和溢出css属性******.ag header cell label.ag header cell text{text overflow:clip；overflow:visible；white space:normal！important；}****pre-line也是一个选项，在我的情况下更合适，请提供帮助
.ag-header-cell-label .ag-header-cell-text {
    white-space: normal !important;
 }