For some reason, you can't use CSS to break long words (e.g. overflow-wrap: break-word;) in HTML tables. Unless you also add table-layout: fixed;.
Anyone know any reasons why this method is a bad idea? Or maybe better techniques?
Example on CodePen https://codepen.io/benjystanton/pen/JjzQWBb
@benjystanton Without looking at UA source code, I am guessing because tables are considered data structures whose content should not be busted up. Never mind not knowing *where* to break if the word is not in the system dictionary (or language).
1. Yes, adding `table-layout: fixed` could mess with size calculations as users scale text, zoom, adjust spacing, etc.
2. Stuff a `<wbr>` or `­` into the word where you want it to break.
@aardrian thank you! I'll give your suggestions a try.
@benjystanton - You might be able to resolve this using the `white-space` CSS property > https://developer.mozilla.org/en-US/docs/Web/CSS/white-space - set at the <td> element level.
In most browsers this defaults to
`white-space: normal;`
so explicitly setting this to
`white-space: break-spaces;`
might work.
Further explanation of this process here > https://perishablepress.com/wrapping-content/
Hope this helps
@whitingx thanks Rob, I'll try this out and see!