diff --git a/CHANGELOG.md b/CHANGELOG.md index 9004887ac6..b32755df3a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,12 @@ ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N)) +- Fix wrapping of long lines of text in summary list + + Thanks to [@MoJ-Longbeard](https://github.com/MoJ-Longbeard) for raising the issue. + + ([PR #1169](https://github.com/alphagov/govuk-frontend/pull/1169)) + ## 2.6.0 (Feature release) 🆕 New features: diff --git a/src/components/summary-list/_summary-list.scss b/src/components/summary-list/_summary-list.scss index 9d206faa60..ad4b25c9a4 100644 --- a/src/components/summary-list/_summary-list.scss +++ b/src/components/summary-list/_summary-list.scss @@ -54,10 +54,17 @@ } } + .govuk-summary-list__key, + .govuk-summary-list__value { + // sass-lint:disable no-duplicate-properties + // Automatic wrapping for unbreakable text (e.g. URLs) + word-break: break-word; // WebKit/Blink only + word-break: break-all; // Standards + } + .govuk-summary-list__key { margin-bottom: govuk-spacing(1); @include govuk-typography-weight-bold; - word-break: break-word; @include govuk-media-query($from: tablet) { width: 30%; } diff --git a/src/components/summary-list/summary-list.yaml b/src/components/summary-list/summary-list.yaml index da62b0e512..f8217fc29b 100644 --- a/src/components/summary-list/summary-list.yaml +++ b/src/components/summary-list/summary-list.yaml @@ -336,6 +336,36 @@ examples: text: Quick - href: '#' text: Erase + - key: + text: Long website address + value: + html: | + https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch + actions: + items: + - href: '#' + text: Change + visuallyHiddenText: long website address + - key: + text: Long email address + value: + html: | + webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com + actions: + items: + - href: '#' + text: Change + visuallyHiddenText: long email address + - key: + text: No wrapping allowed + value: + html: | +

michelle.longish.name@example.com

+ actions: + items: + - href: '#' + text: Change + visuallyHiddenText: no wrapping allowed - key: text: Pneumonoultramicroscopicsilicovolcanoconiosis value: