Add utility classes for 2 different word-break options

[frankieroberto]

This adds a nhsuk-table__cell--break-word modifier which can be used on table cells where there is a risk that they contain such long content that the table might otherwise overflow its container and cause horizontal scrolling.

This is particularly possible for email addresses, as the full stop character in email addresses is not a break point.

The modifier is opt-in though, as in other scenarios where the content is more predictable, you likely wouldn’t want table cells to break mid-word.

In order to enable this I’ve added support for classes on table cells. There is an existing format option used for nhsuk-table__cell--numeric, but classes is more flexible (for example allowing custom modifiers and more than one class), and this doesn’t feel like a "format".

I’ve also refactored the Table nunjucks macro to reduce duplication.

Screenshots

Before	After

[paulrobertlloyd]

The GOV.UK Design System, has govuk-!-text-break-word, a general utility class that can be applied anywhere. Can we not do the same here?

(Agree to allowing classes on table cells, been hacking my way around this for a while)

[frankieroberto]

@paulrobertlloyd that class uses overflow-wrap: break-word (and the non-standard word-wrap: break-word for older browsers) which doesn’t seem to work for table cells unless they’ve been given a fixed width.

Both word-break: break-all and overflow-wrap: break-word seem to have the same definition, so why they behave differently is a bit of mystery - I guess something down to the box model calculations for flexible tables? 🤷

[edwardhorsford]

@frankieroberto could it be a more generic modifier as @paulrobertlloyd suggests, but use a different method when inside a table cell?

[anandamaryon1]

I like @edwardhorsford's suggestion.

On service manual website we have added these locally:

// Helper to break long words/URLs in tables
.nhsuk-table__cell--break-all {
  word-break: break-all;
}
.nhsuk-table__cell--break-all--tablet {
  @include mq($until: tablet) {
    word-break: break-all;
  }
}
.nhsuk-table__cell--break-all--desktop {
  @include mq($until: large-desktop) {
    word-break: break-all;
  }
}

But a more generalised class would be even better.

[frankieroberto]

@anandamaryon1 @edwardhorsford @paulrobertlloyd I've updated this PR to change the modifier class from the a table cell modifier to add 2 generic modifiers:

• .nhsuk-u-word-break-all - uses word-break: break-all;
• .nhsuk-u-word-break-word - overflow-wrap: break-word;

The difference is subtle but crucial. word-break: break-all will only break the word if it absolutely has to, whereas overflow-wrap: break-word will break the word as soon as the word overflows its container and won’t try to avoid it by moving the word onto its own line.

The MDN word-break article has good explanation and examples:

The only reason to use the word-break: break-all over the other one is where the container doesn’t have a defined width (or something) - ie it doesn't work in tables unless the table column widths are defined.

---

I think I’ve got this right but happy to be corrected if I'm wrong! 🤯

[anandamaryon1]

Would it be grotesque to have just .nhsuk-u-word-break and style it so that when used within a table, it switches to use break-all?

[frankieroberto]

Would it be grotesque to have just .nhsuk-u-word-break and style it so that when used within a table, it switches to use break-all?

I considered that, but potentially there are other use-cases for .nhsuk-u-word-break-all (eg a custom component with flexible widths?), and also you might still want to use nhsuk-u-word-break-word in a table if your table is using fixed (or percentage-based) widths?

That said, explaining the difference between the 2 options is really tricky and it took me ages to get my head around it...

[anandamaryon1]

Ok thats fair @frankieroberto . I'll approve once tests are successful.

[edwardhorsford]

I wonder also about having the single, simpler form, and then if teams need something more specific they could just use their own css?