mastodon.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
The original server operated by the Mastodon gGmbH non-profit

Administered by:

Server stats:

279K
active users

Benjy Stanton

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 codepen.io/benjystanton/pen/Jj

codepen.ioTest break-word in tables...

@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 `&shy;` 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 > developer.mozilla.org/en-US/do - 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 > perishablepress.com/wrapping-c

Hope this helps 🙂

MDN Web Docswhite-space - CSS: Cascading Style Sheets | MDNThe white-space CSS property sets how white space inside an element is handled.

@whitingx thanks Rob, I'll try this out and see!