0

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:

mockup

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

closed as off-topic by Mayo, JohnGB Nov 18 '15 at 12:07

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Mayo, JohnGB
If this question can be reworded to fit the rules in the help center, please edit the question.

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 Nov 18 '15 at 3:46
  • What if you use "word-break" CSS property (assuming you only need to support IE12+) – Igorek Nov 18 '15 at 4:02
  • No dice! The responsive table width doesn't change the div width so it never even wraps. – A. Sim Nov 18 '15 at 4:08

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