The name zero-width space is antithetical, but not without uses. In the text, you may use it around the slashes because you want to be sure that the words are treated separately, but there is no physical space around the line:

However, it’s pretty theoretical – I’ve never had to do it. It may be helpful in a long word to suggest that it may be broken there … but it is also rare because we have a soft hyphen (­), which is designed for this purpose and typically leaves a suitable hyphen pause.

What I own what needs to be done is the exact opposite: trick the system into thinking that one word is two words. As on Twitter, if I @ username or #hashtag in the tweet text, they will be linked accordingly. But I don’t always want that. On CSS Twitter, I might want to refer to the @media query or show the # id switch. Throw a zero width gap between the symbols and the text and I’m all set.

Get a zero width on the clipboard

Here is a pen I read a long time ago that will help you do it:

There is also a quick trick from the browser console:



And one more way that may interest you, bookmark!

Copy and paste problem

The danger between zero width is, no, you don’t see it. For example, if someone copies yours @media query using a zero-width space on a tweet, it doesn’t work in their code editor (because it invalidates the rule) and can be very confusing. For this reason, it’s probably a good idea to avoid using it in anything that can be copied as a code example, but it’s probably great when trying to explicitly link something automatically.


Please enter your comment!
Please enter your name here