CSS text-justify Property Tutorial

In this section, we will learn what the text-justify property is and how to use it in CSS.

Click here to run the text-justify property.

CSS text-justify Property Definition and Usage

The CSS text-justify property is used to set the method of justification when we use the text-align property and set its value to “justify”.

CSS text-justify Property Syntax

text-justify: auto|inter-word|inter-character|none|initial|inherit;

CSS text-justify Property Value

Here are the values we can set for this property:

  • auto: using this value means it’s the browsers that should calculate how this justification should be done.
  • inter-word: using this value means increasing or decreasing of space should be done between words of a text content.
  • inter-character: using this value means increasing or decreasing of space should be done between characters of a text content.
  • none: this value means there shouldn’t be any text justification!
  • initial and inherit: the two global values can also be used for this property.

Example: justify text with CSS

See the Pen justify text with CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS text-justify Property Work?

In this example, the value of the `text-justify` property is set to “inter-character” so then browsers will adjust the empty space between each character to justify the text content of the <p> element.

Leave a Reply