text-justify

The text-justify property in CSS is a companion to the text-align property that is used to set the justification method of text when text-align is set to the justify value.

p {
  text-align: justify;
  text-justify: inter-word;
}

Values

  • inter-word: Specifies that text is justified by adjusting the spacing between words, effectively creating additional word spacing. This is effectively a variation of the word-spacing property.
  • inter-character: Specifies that text is justfiied by adjusting the spacing between characters, effectively creating additional character spacing. This is effectively a variation of the letter-spacing property.
  • auto: Allows the browser to determine whether justification is better handled as inter-word or inter-character. This can be helpful in multi-lingual scenarios where the content language is unknown until rendered, allowing the browser user agent to choose accordingly based on which method better fits the language context.
  • none: Disables justification methods, effectively removing any justification opportunities, or overriding where a justification method may occur in the cascade.

What exactly is justification?

Justified text is a fancy way of saying how text fills the box that contains it. In fact, you may already be well acquainted with justifying text and don't even know it. If you have ever used text editing software like Word and Google Docs, then you might be familiar with these icons:

Text align and justification options in the Google Docs toolbar

Those first three set the text alignment, just like the CSS text-align property, where the text can be aligned to the left, right or completely centered.

That fourth icon is the justify option and it tells the content to fill the entire width of the document so that each line is flush right to the edge, regardless of whether it affects the spacing between words.

Justifying content in Google Docs adds spacing between words to occupy the full document width at each line

The text-justify property allows us to do the same, but with additional flexibility to determine whether the spacing method used to justify the content is managed between words or characters.

Browser Support

The text-justify property is included in the CSS Text Module Level 3 specification, which is currently in Editor's Draft status at the time of this writing.

This property is currently listed as "at risk" of being dropped in the Candidate Recommendation period. As such, it is not recommended to use this property in production as it is unlikely to be adopted as a standard across all browsers in the near future.

Current support is limited to Firefox 55+. Internet Explorer 11 and Edge 14+ also support the property, but only the inter-word value as well as unofficial values not included in the W3C specification.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
NoNo551117No

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
NoNoNoNoNo56

Comments

  1. User Avatar
    Dave Price
    Permalink to comment#

    This will fail on accessibility for people who suffer with Dyslexia as they get confused and can lose where they are reading. This is due to the gaps not being consistent.

    Always good to have this in mind as there are a lot of people who suffer with Dyslexia in the world.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag