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.