Justification of text in HTML

Question

Is there way to force the justification of text using CSS to one line? For example:

I want to justify this text
like                   this
ButIdon'tmindifitsquashesit

I don't need people to tell me that it's a bad idea to justify text in web pages (I have a manual line spacing and hyphenation algorithm to assist), but I'm just wondering if there's a solution, CSS or JavaScript, to handle this.

---

Sorry, wasn't very clear with my question: Each line is in a separate div element, e.g.:

<div>I want to justify this text</div>
<div>like this</div>
<div>But I don't mind if it squashes it</div>

I know about text-align: justify but it doesn't solve my problem — it justifies according to how the browser wants to, not by the each line I have. This may result in inappropriate line breaking or falling short of the right edge.

Answer 1

You cannot justify single lines of text.

However, you can hack together something that may work for you.

div{width:300px; 
    border:1px solid red;
    text-align:justify; text-justify: newspaper;
}

div:after{
    content: "               ";
    line-height: 0;
    visibility: hidden;
}

http://jsfiddle.net/jasongennaro/zX9x5/1/

This only works if you are okay with an extra blank line under the content.

borders just for example to see spacing, etc.

H/T to @thirtydot for the idea: Justify the last line of a div?