Zero-Width Area

No Comments

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:

CodePen Embed Fallback

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



Twitter tip: To forestall usernames and URLs from being transformed to hyperlinks, interrupt them with a zero-width house.

e.g. @​markdalgleish as a substitute of @markdalgleish.

You’ll be able to add a zero-width house to your clipboard by operating this snippet in your browser console:


— 🧁🍨 Mark Dalgleish (@markdalgleish) December 14, 2020

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

CodePen Embed Fallback

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.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment