# 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;
}
```

![Screenshot 2020-08-26 at 10.40.19 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1598461856987/1kY76b6FK.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1598461869009/WKB7PSLBj.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1598461881441/QOgHHFtkO.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](https://css-tricks.com/almanac/properties/h/hyphenate/)

> 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](@pbteja1998) or on twitter at [@pbteja1998](https://twitter.com/pbteja1998) to get updated.

%%[newsletter]
