A Breaking Non-Space?

December 13, 2012  |  Less than 1 minute to read

Heads up! This is an old post - it may contain out-of-date information!

Everyone who has fought with word-wrapping in HTML layouts is familiar with the   HTML entity. This special “space” character appears like a normal space to the end-user, but the browser won’t break this space to wrap a line.

A keyboard with a broken space bar
A broken space.

Recently, I needed the opposite of   - instead of a non-breaking space, I needed a breaking non-space. Luckily, there’s a Unicode character that fits this description: it’s named the ZERO-WIDTH-SPACE character. When the browser goes to wrap a line, it offers itself up as a valid line-wrap location. Using this character is as simple as placing ​ in your HTML where you’d like the potential line-break to happen.

This probably broke more than just spaces.

An Update

I’ve discovered a better way to accomplish this same behavior: the <wbr> element. It’s probably best to prefer <wbr> over &#8203;.

Other posts you may enjoy:

The Next Chapter

December 4, 2018  |  Less than 1 minute to read

ES6 Object Literal Shorthand Is Fun And Kind Of Scary

November 16, 2018  |  1 minute to read

Shell-ing With TypeScript

June 17, 2018  |  2 minutes to read

My First "Hello, World!"

June 7, 2018  |  5 minutes to read

Live Reloading An Angular 2+ App Behind NGINX

May 14, 2018  |  4 minutes to read