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

Posted 2023-03-28

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

【英文标题】：how to wordwrap a header in ag-grid

【发布时间】：2016-02-26 22:12:57

【问题描述】：

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

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

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

【问题讨论】：

请帮助***.com/questions/65018177/…

【参考方案1】：

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

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

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

headerHeight: 48

【讨论】：

看起来只有空格：需要正常

这对我有用，但现在由于菜单图标，我得到了一些未对齐的文本。右侧的菜单图标将顶行向左凸出。这会导致两行标题不在彼此顶部居中，而是在左侧。有什么关于造型的建议吗？

overflow-wrap: break-word; 如果您有较长的单字标题（例如，如果您是德国人），也会有所帮助。

此选项不适用于我的 ag-grid@15.0.0。有关适用于此版本的替代解决方案，请参阅下面的答案。

如果您想指定换行符出现的位置，请使用white-space: pre。

【参考方案2】：

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

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

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

【讨论】：

指定主题类更具体，你应该避免需要!important。例如。 .ag-theme-material .ag-header-cell-label .ag-header-cell-text height: auto; overflow-wrap: normal; white-space: normal; 另一种更具体的方法是将您自己的类应用于列定义中的标题。所以有几种方法可以避免使用 !important。

上述解决方案将帮助您拆分标题文本。如果我建议使用 text-overflow 和溢出 css 属性 ****** .ag-header-cell-label .ag-header-cell-text text-overflow: clip;溢出：可见；空白：正常！重要； ****

【参考方案3】：

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

【讨论】：

我正在使用 ag-grid@15.0.0，但这种方法对我不起作用。

我想我找到了答案。我将在下面发布我的解决方案。

这对我有用 (ag-grid@21.0.1) 仅当您将 css 放在组件级别时。

如果您通过组件中的 scss 文件应用样式，则需要

ng-deep。

这对我有用，即使没有!important

【参考方案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",

【参考方案5】：

把它放在网格选项中

标题高度：50

在 style.css 中

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

【参考方案6】：

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

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

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

【讨论】：

预线也是一种选择，在我的情况下更合适

【参考方案7】：

你可以试试下面的css：

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