Prevent Hyphen Line-Breaks with Non-Breaking Hyphen

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

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.

See the problem: 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

Get notified of new blog posts?

RSS is the correct choice, btw.