Vaadin 14 网格多线单元

Question

我在一列中有很长的字符串，我想将它们显示为网格中的多行单元格。我正在使用 Vaadin 14 + Java，并尝试为特定列设置 CSS 样式类：

Java代码：

@CssImport("./styles/shared-styles.css")
public class RisikoGrid extends Grid<RisikoEntity> {

    public RisikoGrid() {
         setSizeFull();

         // add the column to the grid
         addColumn(Entity::getAttribute).setHeader("MyCol")
            .setFlexGrow(10).setSortable(true).setKey("mycolumn");

         // set CSS style class for the specific column
         this.getColumnByKey("mycolumn").setClassNameGenerator(item -> {return "grid-mycol";});

   }
}

CSS（共享样式.css）

.grid-mycol{
    background: red;
    white-space: normal;
    word-wrap: break-word;
}

虽然当我在网络浏览器（chrome）中使用检查器时确实看到了类名，但 css 并未应用。

我需要改变什么才能让它发挥作用？

编辑：这就是我的样式的样子 - 例如我什至看不到背景：红色：

Answer 1

您可以使用内置wrap-cell-content主题变体来允许文本在单元格内换行。

\n\n

grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);\n

\n\n

请参阅https://vaadin.com/components/vaadin-grid/html-examples/grid-theme-demos \xe2\x80\x93上的最后一个示例，其中的文本没有那么长，但如果您将浏览器窗口缩小足够了，你\xe2\x80\x99会看到一些地址换行成两行。

\n