Q_24508716: How to add invisible breaking spaces

This example shows how to add invisible breaks in your code cross browser compatible. There are three approached to the solution, main idea is using word-wrap CSS property for IEx browsers and ZWS fix for other browsers.

This page will remain online for future reference. The original question can be viewed at Experts-Exchange, but requires (free) membership. More information about me, about how this site is maintained and about how to use these pages for yourself, check out the opening page.

Use the following code:

The simple solution is: intersperse every second or third character with either a literal ​ (Zero Width Space) or use the HTML numerical entity form. Both are shown below, as you can see, the ZWS are really invisible. But if you copy the string, they will be there To be successful, this should be automated of course

IE8: the ZWS-trick works
IE7: the ZWS-trick does not work, but the easier word-wrap:word-break works too. Or a div with a width. The word-wrap does not work inside a p or td.
IE6: neither work. The ZWS-trick corrupts the text by showing ZWS as blocks, meaning that IE6 does not recognize the character. If the machine has fonts installed that support ZWS then there's no problem, but you cannot rely on that. Using a CSS expression(), which is not supported on conformant browsers and is not supported on IE8 and above, gives us a neat way out. The fix is complex but easy to apply. Use View Source if you want to see the full solution

<!-- two email adresses, first with utf-8 ZWS and second with the -->
<!-- HTML entity. If you view this with IE6, you may see blocks   -->

thi​​sis​​ave​​ryl​​ong​​ema​​il@m​​ail.nl
thi&#x200B;sis&#x200B;ave&#x200B;ryl&#x200B;ong&#x200B;ema&#x200B;il@m&#x200B;ail.nl

<!-- simple fix for IE7 and IE8 -->
td div {word-wrap: word-break; }

<!-- complex fix to keep IE6 happy -->
/* only apply to IE6 through using '* html' */
* html td div.iefix {border-width: expression(executeOnce_IE6WordBreak(this));}