CSS equivalent to Photoshop's Justify-All

Question

I'd like to take an h2 element and span it's text across the width of it's div.

text-align:justify;

only spreads the text if it's width is greater than the width of it's container... kind of like Photoshop's justify-left

Hasdrubal

Answer 1

CSS:

h2 {text-align: justify;}
h2 span {width: 100%; display: inline-block;}

HTML:

<h2>This is a h2 heading<span></span></h2>

Note that this adds a unvisible extra line, resulting in too much height. You might want to compensate for that:

h2 {text-align: justify; height: 1.15em;}

And for a very neat markup, only working for browsers other then IE7 or below, you could use the ::after selector:

h2::after {
    width: 100%;
    display: inline-block;
    content: ".";
    visibility: hidden;
}

See demo fiddle of all three solutions.

Asci

I'm still trying to figure out why this works, actually :-) – Ess

@Ess The 100% width span ensures two lines of text, resulting in the justification of the first line. It requires inline for being addable to the text, and it requires block for accepting the with; hence the inline-block. – Asci

@All note that the 100% applies to the parent's width. – Asci

Aaah, that makes sense. Indeed. Somehow I only got so far as thinking that the span then would fill the remaining space. My bad. But maybe the span should be reduced in height a bit :-) – Ess

@Ess That's a very good point. Unfortunately, that doesn't work. See edit. – Asci

Answer 2

Time machine answer for when the CSS 3 Text Module becomes a recommendation:

text-align: justify;
text-align-last: justify;

It won't be of much use before then, though.

Ess