TIL: Hyphenate when you justify text

Subscribe to my newsletter and never miss my upcoming articles

Sometimes, when you set text-align to justify, you see the irregular spacing between letters so that the text can be properly justified. Take a look at the below picture.

p {
    text-align: justify;
}

Screenshot 2020-08-26 at 10.40.19 PM.png


You can easily fix this by just hyphenating the text along with justifying it.

p {
    text-align: justify;
    hyphens: auto;
}

Now, the same text in the picture above will now look as follows.

Screenshot 2020-08-26 at 10.40.28 PM.png

See how this removed all the irregular spacing that appeared when you did not hyphenate.


If you don't like your text to be hyphenated, you can just align text to the left, which doesn't look that bad.

p {
    text-align: left;
}

Screenshot 2020-08-26 at 10.40.43 PM.png

It's a very simple trick, but it helps us to make our text look a little better.
You can learn more about hyphens property here

If you want to get notified as soon as I write a new blog post, you can click on the SUBSCRIBE button at the top of this page. You can also follow me here at Bhanu Teja P or on twitter at @pbteja1998 to get updated.

Deng Beny's photo

Lol I was struggling with this and now you just save my life by reminding me. Thank you.

Bhanu Teja Pachipulusu's photo

Awesome. Glad, I was able to help.

Prateek Aher's photo

That's a nice piece of info Bhanu Teja Pachipulusu. But with hyphens: auto , long words look weird if hyphenated at the wrong place. We can use it in conjunction with <wbr> tag.

Bhanu Teja Pachipulusu's photo

Prateek Aher Good suggestion.

But, When you use <wbr> along with hyphens: auto, the browser will still break the word using hyphens at random places(chrome), so that the text will remain justified (or) it will not break the word at all and moves the text to next line and the irregular spacing will appear again.(firefox)

For example, try to see the result of the following in yout chrome and firefox browsers.

<p>I recently set out to implement user registration for a project<wbr>isgood that I'm working on in Elixir/Phoenix. It wasn't long before I could finish It wasn't long before I could finish</p>
p {
    text-align: justify;
    hyphens: auto;
    width: 570px;
    font-size: 24px;
    margin: 0 auto;
}

In chrome,

In firefox,