Search code examples
csstext-align

How can I justify the text placed on multiple lines and columns

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.

Solution

  • 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.