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.
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.
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
Here’s a demo: