Zero-Width Space
Zero-Width Space | CSS-Tricks

	DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!


          
          
The name zero-width space is antithetical, but it’s not without uses. In text, maybe you’d use it around slashes because you want to be sure the words are treated individually but not have any physical space around the slash:



That’s an image. WordPress was being weird about it and not escaping it even when in a code block.



That’s pretty theoretical though—I’ve never once needed to do that. It might be useful in a long word to suggest that it can be broken there… but that’s also rare as we have the soft-hyphen (&shy;) which is designed for that and leaves a typically appropriate hyphen at the break. 



What I have needed to do is exactly the opposite: trick a system into thinking a single word is two words. Like on Twitter, if I @username or #hashtag in the text of a tweet, those will be linked up respectively. But I don’t always want that. On CSS Twitter, I might want to refer to a @media query or show an #id-selector. Toss a zero-width space between the symbols and the text and I’m all set.


Get a zero-width space on your clipboard


Here’s a Pen I created ages ago that will help you do that:







There is also a quick trick for doing it from the browser console:



copy('u{200B}')



via:




Twitter tip: To prevent usernames and URLs from being converted to links, interrupt them with a zero-width space.e.g. @​markdalgleish instead of @markdalgleish.You can add a zero-width space to your clipboard by running this snippet in your browser console:copy('u{200B}')— Mark Dalgleish (@markdalgleish) December 14, 2020




And for yet another way that may appeal to you, a bookmarklet!






Copy & Paste concern


The danger with the zero-width space is, well, you can’t see it. If someone were to, for example, copy your @media query using the zero-width space trick from a tweet, it won’t work in their code editor (because it will invalidate the rule) and it might be extremely confusing. For that reason, it’s probably good to avoid using it in anything that might be copied as a code example, but probably fine when explicitly trying to not autolink something.

          
        