OMBD#18: Avoid Breaking Important Words by Using a Non-Breaking Hyphen

Learn to dominate your hyphens and control where your content line breaks

Welcome to issue #18 of One Minute Better Developer, where you become a more successful software developer by reading short nuggets of knowledge, one minute at a time.

⏮️ 🔛 ⏭️

Art by my buddy Loor Nicolas

THE PROBLEM

Let’s say our company is called Astro-Team, or whatever name with a hyphen.

On our website, the company name gets divided into multiple lines when nearing the end of the line, since its hyphen is considered by the browser as a line break opportunity.

Hyphen-Minus being used as line-break.

A SOLUTION

You could go and wrap every occurrence of the company name with a <span style="white-space: nowrap;"></span> , and that would fix it.

ANOTHER (CLEANER) SOLUTION

Replace the Hyphen-Minus symbol -, which is the one most commonly found on keyboards, with a Non-Breaking Hyphen ‑ , which looks the same but will avoid line breaks.

Here’s a demo:

Non-Breaking Hyphen vs Hyphen-Minus line break.

If you liked this story, you may also like:

1 Minute To Become A Better Developer (#17)

1 Minute To Become A Better Developer (#19)

⏮️ 🔛 ⏭️