Justifying the last line of text using CSS

Question

I've got a CSS helper class that is designed to force the last line of "text" (or in the intended usage, inline block divs) to become justify-aligned as well as the rest of them.

Here's the code I've got:

.justify-all-lines
{
    text-align: justify;
    /* IE-only properties that make the :after below unnecessary (we need this because IE 6/7 don't support :after, though) but if they both apply it'll be fine */
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.justify-all-lines > *:last-child:after
{
    display: inline-block;
    width: 100%;
    content: 'hello';
}

.blocky
{
    display: inline-block;
    /* Make inline block work in IE 6/7 */
    zoom: 1;
    *display: inline;
}

This is intended for use like so:

<div class="justify-all-lines">
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
</div>

However, I see the 'hello' show up INSIDE the last "blocky" div instead of after the last "blocky" div. What am I doing wrong?

`.justify-all-lines > *:last-child:after { /* stuff for IE6/7 */ }` is odd. IE6 does not support `>` and both IE6/7 do not support `:last-child` or `:after`. — thirtydot, Aug 05 '11 at 01:46
Which browsers are you testing with at the moment? Could you make a [jsFiddle](http://jsfiddle.net/) demo showing the problem? — thirtydot, Aug 05 '11 at 01:47
@thirtydot I'm using dotless (http://www.dotlesscss.org/) and that's just a copy & paste anomaly since I converted a mixin to inline CSS for the purpose of this post. Figured more people would be familiar with plain CSS than LESS. I'll fix it. ;) — Jake Petroules, Aug 05 '11 at 01:52
"I see the 'hello' show up INSIDE the last 'blocky' div" — It's supposed to do that. It doesn't create a new element, but (at least apparently) appends content to the specified element. — Joseph Marikle, Aug 05 '11 at 01:55
Here's a jsFiddle demo showing the problem: http://jsfiddle.net/Rk79Y/ — Jake Petroules, Aug 05 '11 at 01:57
@Jake Petroules: Please fix the missing `;` on the end of `inline-block`. — thirtydot, Aug 05 '11 at 01:58
@Joseph Ah, so it looks like what I want should be `.justify-all-lines:after`, not `.justify-all-lines > *:last-child:after` then? — Jake Petroules, Aug 05 '11 at 02:02
Looks like that does indeed place it outside the last .blocky element. — Joseph Marikle, Aug 05 '11 at 02:10

Jake Petroules · Accepted Answer · 2011-08-05T05:36:39.490

5

Working solution:

.justify-all-lines
{
    /* This element will need layout for the text-justify
     * to take effect in IE7 (and possibly previous versions);
     * this will force it, for more info Google "hasLayout in IE"
     */
    overflow: hidden;
    text-align: justify;

    /* For IE6 to IE7 since they don't support :after */
    -ms-text-justify: distribute-all-lines; /* IE8+ */
    text-justify: distribute-all-lines; /* IE5+ */
}

.justify-all-lines:after
{
    /*
     * We don't need IE6 and IE7 inline-block hack support here
     * since they don't support :after anyways (the text-justify
     * properties for them are above)... IE8 and above have native
     * inline-block support so for IE8+, both the text-justify and
     * :after will take effect but it doesn't have any negative
     * effects since this element is invisible
     */
    display: inline-block;
    width: 100%;
    content: '.';
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

edited Aug 05 '11 at 05:36

answered Aug 05 '11 at 02:16

Jake Petroules

23,472
35
144
225

http://jsfiddle.net/Rk79Y/6/. Doesn't seem to work in IE7, but then again neither does my solution (unless I tweak it like in the answer I linked to). Otherwise it's fine. – thirtydot Aug 05 '11 at 02:23
Hmm, that same code works on my site but not in jsFiddle. I wonder if it's doing something to the CSS... – Jake Petroules Aug 05 '11 at 05:01
text-justify was added in IE5, and -ms-text-justify in IE8, so it should definitely work without issue... – Jake Petroules Aug 05 '11 at 05:11
2

hasLayout! hasLayout!! Apparently the `.justify-all-lines` needs layout for `text-justify` to work. I had `overflow:hidden` in the CSS on my website, which triggered hasLayout, but not in the jsFiddle. That explains it. Thanks a ton for pointing this out, because I would not have noticed! Working jsFiddle link: http://jsfiddle.net/Rk79Y/9/ – Jake Petroules Aug 05 '11 at 05:32

Justifying the last line of text using CSS

1 Answers1