Balanced text wrapping in HTML

Question

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.

Ilonailonka

text-wrap: balance is in the works. – Wishbone

@Wishbone - sadly, it's been "in the works" for nearly a decade. – Crural

Answer 1

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.

Tamasha

Here's the demo. – Crural

Note that it is now available as a native utility in addition to a jQuery plugin. – Castoff

This CSS feature is landing in Chromium 113. You can try it out now in Canary. front-end.social/@Una/109949776661803793 – Wherewith

Answer 2

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>

One

Another similar approach would be to <br> the lines manually, as in <p>Here is some really long label<br>that ends on two lines</p> – Hamitic

This, however, is not very responsive. – Tumbleweed

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. – Tertia

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. – One

Answer 3

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.

Fowle

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. – Digitate

FOUC: flash of unstyled content – Omor

@Omor thanks. Looks like "unstyled content" has won out over "butt-ugly content"... #6273202 – Imprimatur

Answer 4

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

Vouch

Answer 5

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>

Markman