TIL: Hyphenate when you justify text

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;
}
notion image
 

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.
notion image
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;
}
notion image
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

This blog is built with MDX.one

Write on your Notion, and see it live instantly on your blog.

Create your blog for free