See:
<span style="display: inline-block;"></span>
to mark possible line breaksWhen copy/pasting, CanYouFindOddMarkersInThisTooLongOfAWordItIsRightHereBeforeAllOccurencesOfTheCapitalLetterOSoOneMoreTimeCanYouFindOddMarkersInThisTooLongOfAWordItIsRightHereBeforeAllOccurencesOfTheCapitalLetterOButCanYouSeeItWhenCopying?
Or in a table, like used in the comments:
First column |
When copy/pasting, CanYouFindOddMarkersInThisTooLongOfAWordItIsRightHereBeforeAllOccurencesOfTheCapitalLetterOSoOneMoreTimeCanYouFindOddMarkersInThisTooLongOfAWordItIsRightHereBeforeAllOccurencesOfTheCapitalLetterOButCanYouSeeItWhenCopying? |
Resize this window to see the line wrapping, optional before each occurence of the capital letter "O".
See also support for display: inline-block.
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:
First column |
When copy/pasting, CanYouFindTheMarkersInThisTooLongOfAWordWhenWidthHasBeenSetUsingJavaScriptAndTheUnicodeMagicHasBeenRemovedOnHover? |
Copy the text in the last example above. But be sure to not start the selection before the second table column.
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:
First column |
When copy/pasting, ThisTooLongOfAWordHasNoExplicitMarkersAtAllButJustTheWordBreakCssRuleReallyThisTooLongOfAWordHasNoExplicitMarkersAtAllButJustTheWordBreakCssRule. |
<wbr>
...which works in most browsers, and was nicely supported in IE7, but no longer in IE8 and IE9:
When copy/pasting, CanYouFind