1

I am wondeing how can I justify some text in an HTML document in the following manner:

Original Text:

............     ..........
.......          ......

Result Expected:

............     . . ........
. . . . . ..     .  . . . . .

I've been thinking and searching about a solution but I couldn't get anywhere.

Please help.

EDIT

Just to clarify, the columns and the rows should remain completely separate.

Adam
  • 2,948
  • 10
  • 43
  • 74
  • There are many existing questions about text justification, and the simplest answer `text-align: justify` can be found in many of them. Proper justification is a rather complicated issue, and you should clarify what the goal is. In particularly, from the example, it seems that the last line should be justified, too. Is that right? – Jukka K. Korpela Dec 22 '12 at 21:38
  • That's right, the longest column in any row should be taken as the largest one and the rest should be stretched based on that. – Adam Dec 22 '12 at 21:59

3 Answers3

3

Assuming that your text has been placed in columns either as separate divs or the css-columns attribute, setting text-align: justify; should do the trick. Without seeing the markup involved I cannot help further.

EDIT: Please see this question and the top answer. I hope it helps you out.

Community
  • 1
  • 1
Drakekin
  • 1,341
  • 1
  • 11
  • 23
2

You can justify text with text-align: justify, but this tends to cause typographically poor results. You can improve the situation by using hyphenation (in CSS or with JavaScript). On IE, you can additionally use text-justify: newspaper, which tends to improve the result.

Regarding the last line of a paragraph or other block, which seems to be the issue here, you can add

-moz-text-align-last: justify;
text-align-last: justify;

On IE and Firefox, this makes the last line justified. But you may not like the result. If the last line has just a little text, compared with the column width, it will have huge gaps between words and/or letters.

The division of text into columns is a separate issues and has many possible approaches, depending on context and design preferences.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
1

Just put this lines on each column and line:

text-align:justify;
text-justify:inter-word;
paulinho
  • 146
  • 8
  • 1
    Bonus points for using [text-justify](http://www.w3.org/TR/css3-text/#text-justify), but you should really explain your answer, not just give a piece of code. – Pavlo Dec 22 '12 at 21:26
  • I can't see how I can use this.
    ............ ..........
    ....... ......
    not working.     – Adam Dec 22 '12 at 22:00