Zero-Width Area

The title zero-width house is antithetical, however it’s not with out makes use of. In textual content, perhaps you’d use it round slashes since you need to be certain the phrases are handled individually however not have any bodily house across the slash:

That’s fairly theoretical although—I’ve by no means as soon as wanted to try this. It is likely to be helpful in a protracted phrase to counsel that it may be damaged there… however that’s additionally uncommon as we now have the soft-hyphen (­) which is designed for that and leaves a usually acceptable hyphen on the break.

What I have wanted to do is strictly the other: trick a system into considering a single phrase is 2 phrases. Like on Twitter, if I @username or #hashtag within the textual content of a tweet, these can be linked up respectively. However I don’t at all times need that. On CSS Twitter, I’d need to consult with a @media question or present an #id-selector. Toss a zero-width house between the symbols and the textual content and I’m all set.

Get a zero-width house in your clipboard

Right here’s a Pen I created ages in the past that may make it easier to try this:

There’s additionally a fast trick for doing it from the browser console:

copy(‘u{200B}’)

through:

And for one more manner which will attraction to you, a bookmarklet!

Copy & Paste concern

The hazard with the zero-width house is, effectively, you possibly can’t see it. If somebody have been to, for instance, copy your @media question utilizing the zero-width house trick from a tweet, it gained’t work of their code editor (as a result of it would invalidate the rule) and it is likely to be extraordinarily complicated. For that cause, it’s in all probability good to keep away from utilizing it in something that is likely to be copied as a code instance, however in all probability fantastic when explicitly making an attempt to not autolink one thing.

The put up Zero-Width Area appeared first on CSS-Methods. You’ll be able to assist CSS-Methods by being an MVP Supporter.