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

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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why Use IT Managed Services?

Youth is wasted on the young, or what I might have told myself six years ago

Game Dev in Progress… Day 46

Install Google Assistant In Gnome Shell

Spinnaker by Example: Part 1

Python Code for Facial Recognition and Security Automation.

Testing XPSWMM 1d/2d inlet flow exchange

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
Jon Portella

Jon Portella

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

More from Medium

Git A Kick Start On Git

How I Got Fancy Footnotes Working on SquareSpace Using Bigfoot.js

A screenshot of the author’s website where he successfully implemented Bigfoot.js after lots of trial and error.

The Admin Dashboard Saga