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

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.

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

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.

Full-Stack Developer, Teacher, Maker, and general Things-Doer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store