TIL: Hyphenate when you justify text

Bhanu Teja Pachipulusu
·Aug 26, 2020·

1 min read

Play this article

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.

Share this