Justifying a text but keeping its last lines always centered

Question

Is there anyway to justify a text but keeping its last (may not be separate line, the part of the text that is shown at the end of the div) always centered using pure CSS.

for example

                  Div Size --<Hello everyone, I would like to>---
                              show and example for the result
                                    that I want to get!

Using just text-align:center definitely doesn't solve this problem as the size of the lines (except the last line) does not get equalized. However I found something in the W3School which is text-align-last:center, that also does not solve the problem as it doesn't work in chrome.

Answer 1

So, the following hack seems to work, but it's really incredibly ugly IMO, as it relies on you controlling the line-height and using absolute positioning. Worse, it requires you to know how many lines there are in your text, which depends on the width of the div and the font-size, and probably requires JS to compute.

Anyway, after all the above disclaimers, here's the hack: Use two divs with the same text, one on top of the other. One justified, one centered. Then clip the justified one.

HTML

<div id="a">the last line of text in this div should be centered, while all other lines should be justified</div>
<div id="b">the last line of text in this div should be centered, while all other lines should be justified</div>

CSS

div {
    width: 150px;
    line-height: 1em;
    background-color: #FFEEEE;
}

#a {
    text-align: justify;
    height: 3em;
    overflow: hidden;
    position: absolute;
    top: 0px;
}

#b {
    text-align: center;
    position: absolute;
    top: 0px;
    z-index: -1;
}

Fiddle.

Of course, the above code is hard-coded for the specific width. Again, you'll probably need JS in order to compute the number of lines in the div. I'm pretty sure that until this gets implemented in Webkit you probably won't find an elegant solution for your problem.