如何让Vaadin 24的Details组件展开时不因宽内容增加宽度？

在Vaadin 24中使用Details组件时，展开包含长文本的内容区域后，组件整体宽度会被内容撑开，导致宽度突变，这不符合预期。

代码示例 #

val details = new Details("Short summary",
                new Span("Very looooooooong text that is wider than summary." +
                            "This span can even be wrapped in layout component like vertical layout"));

现象说明 #

• 收起状态：组件宽度由短摘要文本决定
• 展开状态：组件宽度被长内容撑开，宽度明显增加

解决方法 #

1. 给Details组件设置最大宽度

通过限制组件的最大宽度，确保展开时不会被内容无限撑开。可以用CSS或者Java API实现：

CSS方式：

vaadin-details {
    max-width: 100%; /* 可根据需求设置具体数值，如300px */
    width: fit-content; /* 收起时宽度匹配摘要文本，展开时不超过最大宽度 */
}

Java代码方式：

details.setWidth("fit-content");
details.setMaxWidth("100%");

2. 让内容容器自动换行

给内容区域的组件（如Span、VerticalLayout）设置宽度，强制文本自动换行，避免撑开父组件：

Span longText = new Span("Very looooooooong text that is wider than summary." +
                        "This span can even be wrapped in layout component like vertical layout");
longText.setWidth("100%"); // 让文本占满内容区域宽度并自动换行
val details = new Details("Short summary", longText);

如果内容放在VerticalLayout中：

VerticalLayout contentLayout = new VerticalLayout();
contentLayout.setWidth("100%");
contentLayout.add(new Span("Very looooooooong text..."));
val details = new Details("Short summary", contentLayout);
details.setWidth("fit-content");
details.setMaxWidth("100%");

3. 自定义内容区域样式

通过CSS强制内容区域宽度继承父组件，并设置文本换行规则：

vaadin-details vaadin-details-content {
    width: 100%;
    overflow-wrap: break-word;
}

以上方法均可有效避免Details组件展开时宽度突变的问题，可根据实际布局需求选择合适的方案。

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