列标题中的文本能否在 Vaadin 14 的网格中换行到多行? [英] Can the text in a column header wrap to multiple lines in a Grid in Vaadin 14?

问题描述

在上图中，我创建了一个 GridVaadin 14. 注意列标题​​没有环绕的红线.

In above image, I have a Grid created in Vaadin 14. Notice the red lines where the column titles were not wrapping.

我试图弄清楚是否有可能(并且安全/容易/标准)让列标签换行(例如，就像在 Excel 中那样).

I'm trying to figure out if it's possible (and safe/easy/standard) to get the column labels to wrap (like they would in Excel, for example).

我和我的同事都无法弄清楚如何做到这一点.

Neither I nor my colleagues could figure out how to do so.

推荐答案

您需要按照以下代码段调整 Vaadin Grid 样式:

You will need to adapt the Vaadin Grid styles as in the following snippet:

/* wrap text in grid column headers */
[part~="header-cell"] {
    white-space: normal;
}

通过 @CssImport 注释包含 CSS，主题化网格:

Include the CSS via @CssImport annotation, theming the grid:

@CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")
public class YourViewOrLayout extends Composite<Div> {
   ...
}

主要混淆 Web 组件样式的原因是 shadow DOM 概念.每个 Web 组件都有自己的样式范围.这意味着 shadow DOM 中的所有 HTML 标签都必须通过 shadow DOM 中的