26

In HTML, is there a way to evenly distribute text that is broken across multiple lines?

E.g., I don't want:

   Here is some really long label that ends up on
   two lines.

I'd prefer:

                  Here is some really long label 
                      that ends up on two lines.
Tony the Pony
  • 40,327
  • 71
  • 187
  • 281

5 Answers5

31

Adobe has proposed that a new css property be added text-wrap: balance.

In the meantime they have created a jQuery plugin named balance-text to achieve the same result.

Andy
  • 1,550
  • 2
  • 17
  • 15
5

Somewhat of a workaround, but you can use non-breaking spaces for the last few words:

<p>Here is some really long label that ends on&nbsp;two&nbsp;lines</p>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Collin Anderson
  • 14,787
  • 6
  • 68
  • 57
  • Another similar approach would be to `
    ` the lines manually, as in `

    Here is some really long label
    that ends on two lines

    `     – Óscar Gómez Alcañiz Mar 28 '17 at 08:21
  • 2
    This, however, is not very responsive. – Stuck Apr 02 '19 at 19:33
  • 2
    1. It's not responsive. 2. It's useless for dynamic content 3. It's needs to be implemented in every instance manually per line of affected text. If he was looking for a non flexible solution simply adding a new max-width around desired content, or adding a whitespace:nowrap; would have been far more practical solutions to suggest. At least adjusting max-width via media queries still retains some flexibility in terms of dynamic content and responsive layouts. – GibsonFX May 13 '19 at 10:55
  • 1
    Yup, exactly, this isn't a super great general purpose solution, but might be helpful if you only need to fix one or two cases and are ok with a not so perfect look on every screen size. – Collin Anderson May 13 '19 at 15:29
0

In pure HTML/CSS there isn't a way to accomplish this, because there is no way to measure the length of the line.

One way to do this would be with javascript, but you will end up with a FOBUC while the javascript calculates the line length and splits it accordingly.

The best way to avoid that would be to split the line with PHP/ASP/Whatever you're using.

Isaac Hildebrandt
  • 1,018
  • 5
  • 16
  • 3
    Well, "the best way" is unsound in the face of varying fonts and (probably) limited width. For instance, FireFox has minimum font size option, which would likely screw such setup. –  May 25 '10 at 22:07
  • 3
    [FOUC](http://en.wikipedia.org/wiki/Flash_of_unstyled_content): flash of unstyled content – kirkaracha Mar 05 '15 at 02:44
  • @kirkaracha thanks. Looks like "unstyled content" has won out over "butt-ugly content"... https://stackoverflow.com/questions/6272702/should-modernizr-file-be-placed-in-head/6272728#comment27484152_6272728 – mwfearnley Apr 22 '20 at 16:23
0

I think you can achieve that if you set fixed width of the element-container and play with padding properties.

bancer
  • 7,475
  • 7
  • 39
  • 58
0

This CSS text property offers remarkable benefits for headings. It's called text-wrap: balance, and you can see its practical use case here.

Please be aware of its limited browser support currently.

h2 {
  font-size: 2rem;
  text-align: center;
  
  /* Balances the text across multiple lines */
  text-wrap: balance;
}
<h2>Here is some really long label that ends up on two lines.</h2>
Penny Liu
  • 15,447
  • 5
  • 79
  • 98