W3docs
en
Log in

CSS text-justify Property

Use the text-justify CSS property to specify how should be spacing behavior between words or characters. Read about property values and see examples.

The text-justify property defines the behavior of spacing between words or characters.

The text-justify property is one of the CSS3 properties.

The text-justify property selects the justification method of text when text-align is set to "justify".

Initial Valueauto
Applies toBlock-level elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.style.textJustify = "inter-character";

Syntax

CSS text-justify values

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

Example of the text-justify property:

CSS text-justify code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: justify;
        text-justify: inter-word;
      }
    </style>
  </head>
  <body>
    <h2>Text-justify property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Try it Yourself »

Result

CSS text-justify inter-word value

In the following example resize the browser to see how "justify" works:

Example of the text-justify property with the "inter-character" value:

CSS text-justify with inter-character value example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        text-align: justify;
        text-justify: inter-character;
      }
    </style>
  </head>
  <body>
    <h2>Text-justify property example</h2>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </body>
</html>
Try it Yourself »

Note: Browser support for text-justify is limited. The inter-character value is not supported in most modern browsers.

Values

ValueDescriptionPlay it
autoJustification algorithm is defined. The browser is allowed to determine whether inter-word or inter-character is better for justification. This is the default value of this property.Play it »
inter-wordThe browser increases the space between words. This is typical for languages with clear word boundaries.Play it »
inter-characterThe browser increases the space between characters during justification.Play it »
noneJustification is deactivated.Play it »
initialMakes the property use its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice

What are the different values of the 'text-justify' property in CSS, and what do they mean?