Line Break in Span Element or Text

Flow
1

Hi. I wanted to make a Span tag and added text. But it wasnt auto breaking lines. I dont want text area because its more of a bigger label than an input field. Any advice on this? Text doesnt break either. Thanks in advance

2

Guess I will stick with label.

3

Depends where and for what you need the line break. Inside an Input fields’ caption or for example to break apart Paragraphs.

4

I’m not 100% sure what you are looking for but to me Span is “auto breaking” just fine. My guess is you mean that line breaks are preserved, which is a “web thing”. Maybe one of these examples will help:

        setWidth("100px");
        String text = "foo\nbar\nloooongngngnll line that should autobreak";
        
        add(new Paragraph(text));
        add(new Span(text));
        add(new Pre(text));
        add(new ParagraphWithLineBreaks(text));
5

The implementation for the last one:

    /**
     * Use this class if you want line breaks to be maintained for text and also
     * automatically break line when needed.
     */
    public static class ParagraphWithLineBreaks extends Paragraph {

        public ParagraphWithLineBreaks(String textWithLineBreaks) {
            setText(textWithLineBreaks);
            maintainLineBreaks();
        }

        private void maintainLineBreaks() {
             // use `pre` if you want manual line breaks only
            getStyle().set("white-space", "pre-line");
        }
    }
6

This is how those render.

7

Span and many other html element classes have dedicated APIs for setting the white-space behavior, e.g.
span.setWhiteSpace(WhiteSpace.PRE);

8

Label should only be used for custom labels of fields etc – it’s not a generic text element.

9

Thanks for your advices. Will test it tomorrow.

10

Works like a charm, thank you …

11

In the newer versions of Vaadin there is extensive set of predefined utility CSS classes, which you can use. There is good set of those for text and typography, see documentation here.

I warmly recommend to use those.

Like

span.addClassName(LumoUtility.Whitespace.PRE_LINE);

12

I rarely disagree with Tatu, but here I do :teddy_bear: Some points why I think the setWhiteSpace(WhiteSpace.PRE); method is superior:

  • Easier to find in IDE
  • Better typed API
  • More readable code
  • Doesn’t require you to learn new custom Vaadin specific things

Some might claim that if you set that with the “utility css class”, you still have the ability to overrided that in your own theme. But if you do set that already in your Java code, with either of the way, it is more likely you want to override that in you Java code than in CSS.

13

Thanks for pointing that, I was just commenting as I saw getStyle().set("white-space", "pre-line"); which is clearly worse than both.

But yes, I totally forgot that API myself. And as usual, due course of time we have keeping APIs as per user requests and here we have more than one Java API to do it. I agree with your points about setWhiteSpace(WhiteSpace.PRE);.

14

So we finally agree again :grin:

BTW. In latest versions, the Style object is also better typed in many places. Instead of the “string-string” map, you can nowadays set whitespace there also with a better name and get the values autocompleted from enum:

getStyle().setWhiteSpace(Style.WhiteSpace.PRE)

I think this is very good approach in custom components, if the CSS rule is essential part of the functionality (and overriding it in CSS might break it).

1 Like
15

True. Element API in general is something that one should avoid in “views” and if your views are starting be crowded by use of Element API, it is most likely signal that you should refactor the component(s) out of the view into separate class(es).