TIL: Hyphenate when you justify text

UpdatedNovember 1, 2022

•1 min read•View as Markdown

Bhanu Teja Pachipulusu

Full-Stack Developer, Entrepreneur and Co-Founder of Coderplex.

Building https://coderplex.in

Checkout my portfolio at https://bhanuteja.dev

Part of seriesToday I Learned - TIL

Comments (2)

Join the discussion

Deng Beny5y ago

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

Bhanu Teja Pachipulusu5y ago

Awesome. Glad, I was able to help.

Prateek Aher5y ago

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 Pachipulusu5y ago

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,

More from this blog

How I built a Serverless Micro-Blogging Site Using Next.js and Fauna

Authored in connection with the Write With Fauna program. Table of Contents Authentication Setting up Fauna in Next.js Installing Fauna Setting up Migrations Tool Authentication and Authorization in Fauna Next.js Serverless Function Setup for Fa...

Mar 29, 202114 min read

How I built a Serverless Micro-Blogging Site Using Next.js and Fauna

My 2020 Blogging Journey

I wanted to start blogging in Aug of 2020. I decided to use @hashnode for my blog. It was the best decision that I made. I wrote 27 technical articles so far. Most of them are about frontend web development. A thread 🧵 about each of these articles i...

Dec 31, 202017 min read

Next.js Starter Template With Authentication + React 17 + TypeScript + Tailwind CSS 2 + ESLint

Next.js has become my go-to framework for almost every project that I make. So, I made a starter template that I can just use and get started easily. In this article, I will show you how to use the starter template that I made and deploy it with Verc...

Nov 21, 20205 min read

Next.js Starter Template With Authentication + React 17 + TypeScript + Tailwind CSS 2 + ESLint

30+ Git Commands That I Frequently Use

In this article, I will list out all the git commands that I use very frequently. This is not in any way a complete list, just the commands that I use very often. This is intended to be used as a quick reference to perform an action that you want. ...

Nov 13, 20205 min read

The Lifecycle of React Hooks Component

In this article, we will see the order in which different useEffect callbacks and cleanups happen. We will also see how it differs when the app mounts, unmounts, updates. This image is taken from https://github.com/donavon/hook-flow. I took the ex...

Nov 10, 202011 min read

Bhanu Teja Pachipulusu's blog

29 posts

Developer, Indie Maker and Blogger. Currently building MDX.one

Checkout my portfolio

Subscribe to my newsletter

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.

Command Palette

Comments (2)

More from this blog