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.

Answer 1

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

Answer 2

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.

Answer 3

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>

Answer 4

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.