diff --git a/app/components/tables/table-with-more-columns.njk b/app/components/tables/table-with-more-columns.njk index ff1e222d0..1c71c4b17 100644 --- a/app/components/tables/table-with-more-columns.njk +++ b/app/components/tables/table-with-more-columns.njk @@ -35,7 +35,7 @@ }, { text: "stephanie.meyer9@test.com", - classes: "nhsuk-table__cell--break-word" + classes: "nhsuk-u-word-break-all" }, { text: "Active" @@ -50,7 +50,7 @@ }, { text: "aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com", - classes: "nhsuk-table__cell--break-word" + classes: "nhsuk-u-word-break-all" }, { text: "Inactive" diff --git a/packages/components/tables/_tables.scss b/packages/components/tables/_tables.scss index 9cb71572c..f05fcc5e8 100644 --- a/packages/components/tables/_tables.scss +++ b/packages/components/tables/_tables.scss @@ -174,8 +174,3 @@ .nhsuk-table__cell--numeric { text-align: right; } - -.nhsuk-table__header--break-word, -.nhsuk-table__cell--break-word { - word-break: break-all; -} diff --git a/packages/core/all.scss b/packages/core/all.scss index 0c35075a2..dfd9b6c5b 100644 --- a/packages/core/all.scss +++ b/packages/core/all.scss @@ -43,3 +43,4 @@ @import "utilities/typography"; @import "utilities/visually-hidden"; @import "utilities/widths"; +@import "utilities/word-breaks"; diff --git a/packages/core/utilities/_word-breaks.scss b/packages/core/utilities/_word-breaks.scss new file mode 100644 index 000000000..ca7ebc6a9 --- /dev/null +++ b/packages/core/utilities/_word-breaks.scss @@ -0,0 +1,16 @@ +// ========================================================================== +// UTILITIES / #WORD-BREAK +// ========================================================================== + +/** + * This class allows words to be broken between any 2 + * to avoid overflowing their container. + * + * This can be useful on table cells which could contain + * long strings such as email addresses. + * + * Usage: class="nhsuk-u-word-break-all" + */ +.nhsuk-u-word-break-all { + word-break: break-all; +}