Fix wrapping of long lines of text in summary list

alphagov · Jan 31, 2019 · a680f22 · a680f22
1 parent 62d3de3
commit a680f22
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git 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
@@ -54,10 +54,16 @@
     }
   }
 
+  .govuk-summary-list__key,
+  .govuk-summary-list__value {
+    // sass-lint:disable no-duplicate-properties
+    word-break: break-all; // Automatic word breaks
+    word-break: break-word; // WebKit/Blink only
+  }
+
   .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
@@ -336,6 +336,26 @@ examples:
                 text: Quick
               - href: '#'
                 text: Erase
+        - key:
+            text: Long website address
+          value:
+            html: |
+              <a class="govuk-link" href="https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch">https://cs.wikipedia.org/wiki/Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a>
+          actions:
+            items:
+              - href: '#'
+                text: Change
+                visuallyHiddenText: long website address
+        - key:
+            text: Long email address
+          value:
+            html: |
+              <a class="govuk-link" href="mailto:webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com">webmaster@llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch.com</a>
+          actions:
+            items:
+              - href: '#'
+                text: Change
+                visuallyHiddenText: long email address
         - key:
             text: Pneumonoultramicroscopicsilicovolcanoconiosis
           value: