Vaadin label content too big - vaadin

Question

I have this piece of code
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);
And it gives me this:
When I actually want this:
It should be simple to do, but I've tried doing
this.email.setWidth("50%");
and it didn't work.
How can I do this with Vaadin Label, since I also need a hint to show the entire e-mail?

Answer 1

You should actually use "100%" as the label size as it should take all the space the layout gives for it, half in this case.
By default Vaadin will then wrapt the text on multiple lines. IIRC there isn't a built in css style name to do it, so you'll need to use CSS to disable wrapping and use the ellipsis to visualise overflown text. You could e.g. use "cut_text" style name (email.addStyleName("cut_text")) for your email label along with following css rules to your theme:
.cut_text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

Answer 2

as #mstahv mentioned, add a style name to your label
email.addStyleName("cut_text");
and use that css he wrote
.cut_text {
white-space: nowrap;
text-overflow: ellipsis;
}
as for the whole email to be displayed, I would suggest adding a description. Then when user hovers the hidden email it will popup in a small tooltip.
email.setDescription("very_long#email.com");