Vaadin 标签内容太大

Question

我有这段代码

private VaadinLabel email, 
this.email = new VaadinLabel();
this.informativoDab = new VaadinLabel();
HorizontalLayout row = new HorizontalLayout();
row.setWidth("100%");
row.addComponent(this.email);
row.addComponent(this.informativoDab);

它给了我这个：

当我真正想要这个时：

应该很简单，不过我试过了

this.email.setWidth("50%");

但没有用。我如何使用 Vaadin 标签执行此操作，因为我还需要提示来显示整个电子邮件？

Answer 1

您实际上应该使用“100%”作为标签大小，因为它应该占用布局为其提供的所有 space，在本例中为一半。

默认情况下，Vaadin 会将文本换行到多行。 IIRC 没有内置的 css 样式名称来执行此操作，因此您需要使用 CSS 来禁用换行并使用省略号来可视化溢出的文本。你可以例如使用 "cut_text" 样式名称 (email.addStyleName("cut_text")) 作为您的电子邮件标签，并遵循您主题的 css 规则：

.cut_text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

Answer 2

如@mstahv 所述，为您的标签添加样式名称

email.addStyleName("cut_text");

并使用他写的css

.cut_text {
    white-space: nowrap;
    text-overflow: ellipsis;
}

至于要显示整封电子邮件，我建议添加说明。然后当用户将鼠标悬停在隐藏的电子邮件上时，它会弹出一个小工具提示。

email.setDescription("very_long@email.com");

Vaadin 标签内容太大

Vaadin label content too big

vaadin