Have a way to prevent tables from overflowing by breaking words

[frankieroberto]

If you have a table containing a long string, such as an email address, then it can cause the table to extend beyond the width of its container:

Adding the govuk-!-text-break-word class makes no difference in this scenario.

Ideally, the table would follow the pattern of the summary list component (which also looks table-like), and would have its contents break across multiple lines if needed to prevent the table overflowing.

[querkmachine]

Note that this is a non-trivial change due to how these two things interact with one another.

• word-break will only break a word when it is longer than the parent element's inline size.
• a table cell, by default, will increase its inline size to fit the longest word inside of it (even if this means making the table wider than its container).

So, a bit of a Catch-22 there.

This can be fixed by applying table-layout: fixed to the table, which makes each column an fixed percentage of the table width and removes the ability for columns to resize themselves according to their content. Widths for each column can then be specified manually if some need to be wider than others.

There might be some funky way of specifying a width that permits resizing based on content (using fit-content or min-content keywords perhaps), but I couldn't find one that worked in my initial fiddling.

Using <wbr> or ­ within the long word works without making any CSS alterations, but naturally comes with the cost of having to manipulate the table data to insert them.