As part of the responsive design of a site I work on, some of the tables shrink down horizontally when the page shrinks, with the text wrapping onto the next line. This works well enough except for the name field, which inserts zero-width spaces (every ten characters) to make them break properly when shrunk, but unfortunately this ignores the spaces in the name, meaning that as the page shrinks we get this:
download bmml source – Wireframes created with Balsamiq Mockups
Ideally, this would break between the words in the names for an easier reading experience. There's no reason to break up the words when the spaces exist.
Is there a way to make the spaces take priority for line breaks over the zero-width space characters? If not, what's the best way to handle this? Keep in mind that some names might be many characters long without any spaces, so I believe some line breaks are necessary (may be wrong).
