Fix your wonky headings with text-wrap: balance

Unbalanced headlines can be really annoying, and manually trying to hint at fixes for the browser ranges from really annoying to downright impossible depending on how much control you have. Enter text-wrap: balance which fixes thing with one line of CSS 🙂.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:30 - using text-wrap: balance
01:40 - Browser support

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[eioluseyi]

I love how doing things with css is continuously getting easier

[maacpiash]

Hands down the BEST YouTube channel for front-end developers. Kudos, man!

[ChristResilient]

So glad I came across this video; I had the annoying one word all by its lonesome on the second line, but now it has friends hanging out with it.
Thanks, Kevin!

[alexgochenour]

I love how you point out problems I never knew my sites even had. I had imbalanced text all over the place. Glad the solution is so simple. Also, 8 months after this video was posted, global adoption rate of `text-wrap: balance` has doubled to 70%. Thanks KP!

[JosephCodette]

That’s awesome, can’t wait for better support!. Recently I’m juggling a lot with word-break, wrap and hyphens a lot and it gives undesired results especially in non English languages words get hyphenated on the wrong places . Would really appreciate a video on that subject .

[iamtharunraj]

Great video Kevin! One of the problems I come across while making a website is the styling(font size, alignment, etc.) of paragraphs. I would love to see a video where you explain about making paragraphs look better.

[DN]

Very good quick tip, sir. Love CSS. Thank you for sharing.

[jonsommet]

This is one of the few channels that makes watching someone write code kinda fun.

[m-create]

Awesome!! CSS is always getting new cool stuff

[bradtramel]

You are a treasure to the web dev community.

[andrillaf]

Life saver! I was setting max widths and setting margin inline to auto, which really didn’t do it for me

[borstenpinsel]

Great to see that some *styling* stuff where you needed JS, can now/soon be done with CSS, as it should be.

[RicoGalassi]

This is an absolute game changer and can't wait until it's widely adopted.

Breaks and max-widths kill me when cross-device developing! Just shared with my team!!

[GilGoldshlager]

My clients will love this great new feature, thank you for the update 👍

[mohammedalhashamy]

Thanks Kevin this is really great and even coming from a CSS VET!

[MrKOHKyPEHT]

Really cool feature. Waiting for more browser support :)

[lisap]

Great tip, thank you! I had never heard of that before.

[thpixel]

FYI: in case it wasn't mentioned in other comments, that line break is called an, "orphan". Cool tip.

[lukas.webdev]

Probably the shortest long form video I have ever watched... but still more valuable than some 2 hour courses. 😜
Shortest video on this channel so far? Or maybe even shortest long form video ever? 🤔

[MaxWeir]

H1 yes, H2 probably not as the white space is somewhat wasted, if the headings were all centred it would work quite well