没有面板的 Vaadin 布局断线

Question

我知道标签在面板中时可能会自动换行。当文本超过布局宽度时，有没有办法让标签换行？

更新好的，我现在用“800px”宽度而不是“100%”尝试了它，现在标签有换行符。这种行为的原因是什么？我该如何解决这个问题，然后按百分比调整布局大小，因为这对我的页面很重要？

目前看起来像下图，文字被截掉了。

显示设置的提取代码：

    VerticalLayout labelLayout= new VerticalLayout();
    labelLayout.setWidth("100%");
    labelLayout.addComponent(usernameLabel);
    labelLayout.addComponent(postLabel);
    labelLayout.addComponent(ratioLabel);
    labelLayout.addComponent(lowestRatedPost);
    labelLayout.addComponent(highestRatedPost);

    detailsLayer.addComponent(labelLayout);
    wrappercontent.addComponent(detailsLayer);
    wrapper.addComponent(wrappercontent);

Answer 1

我确实遇到了这个问题，并设法使用这个 CSS 解决了它。 Vaadin 标签有 CSS attribure white-space: nowrap 这就是你期望的停止文本换行的原因。

.v-label
{
   white-space: normal;
}

没有面板的 Vaadin 布局断线

Vaadin layout break line without panel

layout

label

line

vaadin

break