How to get a newline/linebreak in Label?

Hey guys,
it may sound pretty trivial, but I can’t get this to work.

I’m using Vaadin 14 and need to format the text inside of a Label with newlines or linebreaks.

I tried “\n”,“< br>” and looked multiple threats up on line, but they all seem to be outdated.

Looks like Vaadin Flow doesn’t support any kind of preformated text or HTML formating in Labels anymore?
If this is the case, then it’s actually kind of a big deal breaker for me…

Any ideas?

Hi! This is a kind of a frequently asked question. The Label class has different semantics in Vaadin 14. Whereas in Vaadin 8 (and earlier) you use Label as a generic text holder, in Vaadin 14 it’s the server side representation of a <label> element, which means [it should be used only when captoning items, like images or text fields etc]
(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).

As a generic text holder, you should usually use a Span (<span>) or possibly a Paragraph (<p>, for longer texts).

If you need to show HTML-formatted content, you have some options: either you can put the HTML content in the innerHtml property of a component like this:

String html = "hello<br>World"; // line break in text
span.getElement().setProperty("innerHTML", html);

Or you can use the Html component - here the caveat is that Html must have a single root element.

        String content = "<div>hello<br>world</div>"; // wrapping <div> tags are required here
        Html html = new Html(content);

hth,

Olli