CSS text-justify

The text-justify property in CSS is used to define how the browser should justify text when it is aligned. Justified text is text that is aligned along the left and right margins, giving it a clean and polished look. The text-justify property can take on different values to achieve this effect.

Values of text-justify

There are three different values that can be used with the text-justify property:

  1. auto: This is the default value. Text is justified in a way that is defined by the browser.
  2. inter-word: Text is justified by adding spaces between words.
  3. distribute: Text is justified by adding spaces between characters.

Examples

Let's take a look at some examples to see how the text-justify property works in action.

Result:

This is an example of text-justify with a value of auto. The browser will determine how to justify the text.

Result:

This is an example of text-justify with a value of inter-word. Spaces are added between words to justify the text.

Result:

This is an example of text-justify with a value of distribute. Spaces are added between characters to justify the text.

Feel free to experiment with the text-justify property and see how it affects the alignment of text in your web pages!