Force line wrap, invisible when copying?

See:

• Occasionally, the Unicode character sequence U+200C U+200B (ZWNJ ZWSP) is inserted into comments
• How to force breaking of non breakable strings?
• Wrapping long text in CSS

Inserting <span style="display: inline-block;"></span> to mark possible line breaks

When copy/pasting, CanYouFindOddMarkersInThisTooLongOfAWordItIsRightHereBeforeAllOccurencesOfTheCapitalLetterOSoOneMoreTimeCanYouFindOddMarkersInThisTooLongOfAWordItIsRightHereBeforeAllOccurencesOfTheCapitalLetterOButCanYouSeeItWhenCopying?

Or in a table, like used in the comments:

Resize this window to see the line wrapping, optional before each occurence of the capital letter "O".

See also support for display: inline-block.

Removing the Unicode markers using JavaScript

JavaScript can be used to remove the Unicode markers on hover, so after the browser has already determined the correct width, using that width to apply both CSS width and word-wrap: break-word. The original text must be restored on resizing, to allow the browser to determine the correct width again:

Alerting when content is copied

Copy the text in the last example above. But be sure to not start the selection before the second table column.

Using word-break: break-all

All CSS, no Unicode trickery. But apparently not supported in Opera, and might need special CSS for older versions of IE and Firefox:

Using <wbr>

...which works in most browsers, and was nicely supported in IE7, but no longer in IE8 and IE9:

When copy/pasting, CanYouFindOddMarkersInThisTooLongOfAWordItIsRightHereBeforeAllOccurencesOfTheCapitalLetterOSoOneMoreTimeCanYouFindOddMarkersInThisTooLongOfAWordItIsRightHereBeforeAllOccurencesOfTheCapitalLetterOButCanYouSeeItWhenCopying?