The Invisible Character That Breaks Autolinking

Zero-width space sounds like a contradiction, yet it’s a genuinely handy Unicode trick. In CSS Twitter circles, it solves a real annoyance: when you type an @ or # followed by text, Twitter automatically converts it into a mention or hashtag. Sometimes you don’t want that—perhaps you’re discussing a CSS @media rule or an #id-selector. Inserting a zero-width space between the symbol and the rest of the string prevents the automatic linking.

Getting the Character Onto Your Clipboard

A CodePen made specifically for this purpose provides a simple copy button:

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

If you prefer working in the browser console, there is a quick JavaScript one-liner to copy the character to the clipboard:

copy('u{200B}')

The snippet above is credited to:

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

For those who favor bookmarklets, that option is also available.

The Hidden Downside

The main risk with the zero-width space is precisely that it’s invisible. If someone copies your @media query from a tweet into their code editor, the silent character will invalidate the rule and produce baffling errors. It’s wise to avoid this trick on any text that may be used as a copy-paste code sample. When your only goal is preventing an autolink, though, it works without a hitch.