Published at
Updated at
Reading time
This post is part of my Today I learned series in which I share all my web development learnings.

Today I discoverd the CSS property text-justify. The CSS property controls how user agents deal with text justification. There are at least two ways browsers justify the text when text-align: justify is set:

  1. add spacing between words
  2. add spacing between every character

text-justify controls the spacing for an element's text justification. The default value for text-justify is auto, which leads user agents to pick the best way depending on performance, quality, and set language.

Then there are inter-word and inter-character, which lead to the spacing between words or characters. It's interesting that there is also a none value which disables text justification completely even when text-align: justify; is set. 😲

Devsheet explaining the values of text-justify

You can read more about text-justify on MDN.

Edited: Sven Wolfermann pointed out that you have to be careful when using text-justify because the browser support is not that great these days.

Edited: Also, if you're using text justification you have to be aware that a nice formated text could harm readability.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 14 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles