如何让Vaadin Grid根据单元格数据自适应行高（Vaadin 23.3.1）

针对Vaadin 23.3.1版本，要让Grid自动适配多行内容的行高、完整显示数据，可按以下步骤修改代码：

1. 调整列配置，强制多行内容换行 #

给包含长文本的MESSAGE列设置固定宽度或最大宽度，触发内容换行，同时保留其他列的自动宽度特性：

public Grid GridBasic() {
    grid.removeAllColumns();
    
    // 基础列保留自动宽度
    grid.addColumn(TopicConsumedDetails::getPartitionNumber)
        .setHeader("PARTITION ")
        .setAutoWidth(true);
    grid.addColumn(TopicConsumedDetails::getOffset)
        .setHeader("OFFSET")
        .setAutoWidth(true);
    
    // 为多行内容列设置宽度，强制换行
    grid.addColumn(TopicConsumedDetails::getMessage)
        .setHeader("MESSAGE")
        .setWidth("400px") // 可根据实际需求调整宽度
        .setFlexGrow(1); // 允许列在剩余空间内自适应扩展

    grid.setItems(details);
    grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);

    return grid;
}

2. 开启自动行高适配 #

Vaadin Grid默认行高固定，需通过设置行高为auto，让Grid根据每行内容的实际高度自动调整：

// 在Grid配置中添加该行
grid.setRowHeight("auto");

3. 补充CSS样式（特殊场景适配） #

如果上述设置后仍存在内容截断问题，可添加自定义CSS确保文本完全显示：
在项目frontend/styles/grid-custom.css文件中添加：

vaadin-grid-cell-content {
    white-space: pre-wrap; /* 保留原始文本换行符，自动换行 */
    word-wrap: break-word; /* 长单词自动拆分换行 */
    min-height: 1.2em; /* 确保单元格至少有基础高度 */
}

vaadin-grid {
    --vaadin-grid-row-height: auto; /* 覆盖默认固定行高变量 */
}

然后在对应的视图类中引入该样式：

@CssImport(value = "./styles/grid-custom.css", themeFor = "vaadin-grid")
public class YourGridView extends VerticalLayout {
    // 视图逻辑代码
}

核心逻辑说明 #

• LUMO_WRAP_CELL_CONTENT主题变体是基础，确保单元格内容不会被强制单行显示；
• 给多行内容列设置宽度是为了触发换行逻辑，避免列无限拉伸导致横向滚动；
• setRowHeight("auto")让Grid动态计算每行的实际高度，适配内容；
• CSS中的pre-wrap可以保留原始文本中的换行符，让多行内容按原格式显示。

内容的提问来源于stack exchange，提问作者Harry