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