3

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.

2 Answers2

3

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: " &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
    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?

Community
  • 1
  • 1
Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
0

You might try

text-align: justify;

in your CSS :-)

Sascha Goebel
  • 323
  • 1
  • 2
  • Well, if you're able to define a common width for all your divs, which you should be, if you already process the content, you can still go with text-align, just for each separate div. – Sascha Goebel Jul 20 '11 at 12:08
  • Doesn't work -- I have `text-align: justify; width: 1000px;` and it is still left-justified. –  Jul 20 '11 at 12:10