7

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

technopeasant
  • 7,809
  • 31
  • 91
  • 149

2 Answers2

12

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.

NGLN
  • 43,011
  • 8
  • 105
  • 200
  • I'm still trying to figure out *why* this works, actually :-) – Joey Jul 09 '11 at 10:10
  • @Joey 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`. – NGLN Jul 09 '11 at 10:15
  • @All note that the 100% applies to the parent's width. – NGLN Jul 09 '11 at 10:20
  • 1
    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 :-) – Joey Jul 09 '11 at 10:24
  • @Joey That's a very good point. Unfortunately, that doesn't work. See edit. – NGLN Jul 09 '11 at 10:30
5

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.

Joey
  • 344,408
  • 85
  • 689
  • 683