3

What i want to do is something like this:

1 2 3 4 5
6       7
8 9 10 11

With this code:

<div style="text-align: justify;">
1 2 3 4 5
<br>
6 7
<br>
8 9 10 11
</div>

But it doesn't work, and displays like this:

1 2 3 4 5
6 7
8 9 10 11
Tyilo
  • 28,998
  • 40
  • 113
  • 198
  • Related: [Justify the last line of a div?](http://stackoverflow.com/q/4771304/2157640) You can explicitly mark up the lines as `div`s and use the tricks from that question to justify them. – Palec Mar 22 '15 at 19:40

4 Answers4

6

In DTP and word processing applications, this option is known as 'force justify'. Unfortunately, this is not an option in CSS.

Kalessin
  • 2,282
  • 2
  • 22
  • 24
  • Rather than an unfortunate case, I think it's a wise decision. Left & right justify was an ancient practice from the era of newspaper. It makes no sense in the digital era where our design has to look good on all kind of screen sizes. Left & right justify may look somewhat good on wide screen, but it looks horrible / unreadable on a narrow vertical screen. – Daniel Wu Jun 13 '22 at 02:22
1

Justify only takes up the complete line when the text wraps to the next line. If you want it to wrap you need a narrower div width, and you need to remove your <br />s.

You could start with something like this though (just not sure how to place the 7 at the same place as the 5 and the 11):

<div style="text-align: justify;">
1 2 3 4 5
<br>
<span style="text-align:left;">6</span>
<span style="float:right;">7</span>
<br>
8 9 10 11
</div>
Palec
  • 12,743
  • 8
  • 69
  • 138
Brett
  • 4,051
  • 2
  • 26
  • 39
1

Another option albeit a little ugly with the &nbsp;.

Live Demo

<div style="width:60px;text-align: justify;">
    1 2 3 4 5 6 &nbsp; &nbsp; &nbsp; &nbsp; 7 8 9 10 11
</div>

Another Options without the nbsp;

<div style="width:60px;text-align: justify;">
    1 2 3 4 5 6 <span style="width:30px; display:inline-block;"></span> 7 8 9 10 11
</div>
Loktar
  • 34,764
  • 7
  • 90
  • 104
  • 1
    :P yeah thats why I put the caveat about it, but I don't know what the OP is ultimately doing, if hes just doing this the one time I think the   is less ugly than some random line breaks and extra markup. – Loktar Jun 01 '11 at 17:25
  • exactly, this is the fact that stopped me from answering this question. – Sujit Agarwal Jun 01 '11 at 17:26
0

Here is some more tricks to play around to get your solution:

<pre><div>1 2 3 4<br/>4     6<br/>7 8 9 0</div></pre>

See the demo here

Sujit Agarwal
  • 12,348
  • 11
  • 48
  • 79
  • Sometimes i will need to have 8 characters fill the same as 9 characters and then this doesn't work! – Tyilo Jun 01 '11 at 21:39
  • I want to have a line with 123456789 fill the same as abcdefgh – Tyilo Jun 02 '11 at 09:30
  • This cant be possible because justification of text is done by varying the width of the blank spaces. Now as the matter of fact, you cannot force justify a text like 123456789 into a space fitting like abcdefgh. BTW, why do you want this to do? Is it so important? – Sujit Agarwal Jun 02 '11 at 09:36