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;
}
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.
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;
}
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.
About the author
Full-Stack Developer, Entrepreneur and Co-Founder of Coderplex.
Building https://coderplex.in
Checkout my portfolio at https://bhanuteja.dev
Comments
Join the discussionAwesome. Glad, I was able to help.
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.
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,
