How to Justify Text using text-align & text-justify CSS Properties

css
Published on April 4, 2019

In typography, justified text means that layout happens in such a way that leftmost side of a sentence aligns with the left edge, and rightmost side of the sentence aligns with the right edge. This gives a cleaner look to the text.

Justification happens by adjusting spaces between words and/or alphabets.

In a webpage, justification of text can be done with the text-align property. Positions for the spaces can further be adjusted with text-justify property.

Text Justification with text-align

Setting justify for text-align will justify the text.

text-align: justify

This is enough for text justification, but sometimes you may need to control the section where extra spaces are being added. This can be done with text-justify.

Choosing to Adjust Space Between Words or Characters with text-justify

text-justify can set the kind of justification to happen when text-align: justify is applied on an element.

Justification happens by managing spaces between words, alphabets or both. With text-justify, you can set whether justification happens by adding spaces between words, or between alphabets.

text-justify can have 4 values :

  • auto : Browser decides the kind of justification to apply. This is the default value.
  • inter-word : Justification happens by increasing spacing between words. Effectively word-spacing is increased.
  • inter-character : Justification happens by increasing spacing between characters in a word. Effectively letter-spacing is increased.
  • none : Turn off justification. This will even overide text-align: justify
/* auto | inter-word | inter-character | none */
text-justify: inter-character

Justifying the Last Line with text-align-last

By default text-align: justify will not justify the last line of a block. If you need justification to be applied on the last line also you can do it with the text-align-last property.

text-align-last: justify

Demo

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident

HTML & CSS :

<div id="demo-container">At vero eos et accusamus et iusto odio dignissimos ducimus qui 
blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi 
sint occaecati cupiditate non provident</div>

#demo-container {
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-character;
}

For languages such as English where spaces is used to separate words, text-justify: inter-character looks a bit odd (like the above). For languages such as Japanese text-justify: inter-character is recommended.

If not sure, you can leave out the text-justify property and allow the browser to decide the kind of justification to be applied.

In this Tutorial