How can I do text-alignment without using "justify"?

Question

My problem is that in my web page I want to create the design of a newspaper and I need to put my text with the alignment that usually in css we can do with this code:

.text-art{
    text-rendering: optimizeLegibility; 
    text-align: justify;
    word-spacing: -1px; 

}

The problem is that the result create blank spaces between the words that ruins the legibility and the graphic of the entire text, as shown in this image:

Does anyone knows how can I solve the problem? Or if exist any javascript way to obtain a better result? Moreover my page is responsive so when I make the window little, the problem is bigger.

Hope you can help me! Thanks in advance!

you could play with the `letter-spacing`, but you may still get large spaces depending on the size of the words in your row - it's just the way `text-align:justify` goes as you need the words to start at the beginning and finish at the end of the row — Pete, Jan 29 '16 at 15:10
Possible duplicate of [CSS text align justify big spaces](http://stackoverflow.com/questions/15118540/css-text-align-justify-big-spaces) — Pete, Jan 29 '16 at 15:16

score 2 · Answer 1 · answered Jan 29 '16 at 15:09

2

Use word-break instead

.text-art{
    text-rendering: optimizeLegibility; 
    word-break: break-all;
}

answered Jan 29 '16 at 15:09

Vicky Gonsalves

11,593
2
37
58

score 1 · Answer 2 · answered Jan 29 '16 at 15:16

Your problem stands with the line length. Your lines are too short in terms of words/line. That is why the spaces between words are evident.

You have a few options:

Use smaller font size, so that more words fit on each line
adjust letter-spacing
Use left alignment

I would go with smaller font size for small windows.

How can I do text-alignment without using "justify"?

2 Answers2