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).

1 Answer 1


This is not really a UX question, however ...

Have you tried

p.test {
    word-wrap: break-word;

Found on W3C website

  • Thanks for the answer, but I'm not quite sure how well that works with a table. This name is in a <td> and that doesn't seem to be interacting well with it. Setting the table to table-layout:fixed gives better wrapping but breaks the rest of the stretch/shrink code, making all columns the same length (which is not good).
    – A. Sim
    Commented Nov 18, 2015 at 3:46
  • What if you use "word-break" CSS property (assuming you only need to support IE12+)
    – Igorek
    Commented Nov 18, 2015 at 4:02
  • No dice! The responsive table width doesn't change the div width so it never even wraps.
    – A. Sim
    Commented Nov 18, 2015 at 4:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.