Senior Frontend Engineer at GitLab and cellist based out of Prince Edward Island, Canada. Fascinated with usability and aesthetics.
December 13, 2012 | Less than 1 minute to read
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.
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.
I’ve discovered a better way to accomplish this same behavior: the <wbr>
element. It’s probably best to prefer <wbr>
over ​
.
Other posts you may enjoy:
December 4, 2018 | Less than 1 minute to read
November 16, 2018 | 1 minute to read
June 17, 2018 | 2 minutes to read
June 7, 2018 | 5 minutes to read
May 14, 2018 | 4 minutes to read