Question

This is my current code which fails to wrap text in a element without splitting something halfway:

<td style="width: 652px; max-width: 652px; border-left: 1px solid black; white-space: normal !important; word-wrap: break-word;">

Is there a way that I can substitute the ‘word-wrap: break-word;’ for something else with a similar effect but not splitting a word halfway? Thanks!

Answer 1

You can specify in the text where the word will break by using the html entity ­ (soft hyphen). Place the entity inside a word, and if it nears a border then it will break and you’ll see a dash at the end.

<div>
    ObserveMyLong&shy;Word
</div>

The downside to this solution is that of course you must place it in the text where you want it, so it’s only viable for specific words for which the location of the word break is really important.