Zero-Width Space Unicode can break a long word or sentence properly

I am not sure how many of the frontend devs out there are just frustrated as me, when you see a QA raise issues for text-wrapping, or long words that need to break like desired and so on. Yes the text follows its own flow and does not wrap as you like. But can you fix it? Yes, use the Unicode for zero-width space.

What is zero-width space?

Let me introduce you to zero-width space. Its just a Unicode non-printing character, which acts as a space but you cannot actually see it. It helps you in wrapping long words. May be we can call it the invisible space?

Using zero-width space you can indicate where one word ends and another word begins. Especially in some languages like Japanese where space does not separate two words.

It can be used as a replacement of a soft hyphen (SHY) where you need to mark a line break but without hyphenation.

Some Examples

Take for example the below things without zero width space

The same examples with zero width space

Zero-width space notation

Unicode U+200B

HTML ​ ·  ​

CSS-code \200B

Let downs

Zero-width space can create confusion, because many of the code editors and even wordpress invalidates the rule. The unicode is not visible in the common code editors. So one may fail to understand why the text is behaving in a different way, unless you inspect them on the browser.

You might have also noticed this issue where some code does not run when you copy paste from a website, hidden codes in the play,

To solve this you can write a regex validator to just allow the acceptable characters.

So, use them in caution and only when needed.

If you have more usecases to add on, let me know!