Preventing long text overflow.

src/sass/_govcmsui-mixins.scss

@@ -0,0 +1,12 @@
+// GovCMS UI Mixins
+
+// This mixin prevents long strings overflowing containers.
+// Taken from https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
+
+@mixin text-overflow {
+  word-break: break-word;
+  word-wrap: break-word;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+}

src/sass/govcms-ui.scss

@@ -1,6 +1,7 @@
 // --- UI-Kit Bootstrap styles -----------------------------
 // Variables
 @import 'uikit-bootstrap/vars'; // Mixins
+@import 'govcmsui-mixins';
 @import 'uikit-bootstrap/mixins'; //  Header, footer, etc
 @import 'uikit-bootstrap/global'; //  Text size etc.
 @import 'uikit-bootstrap/typography'; // All elements, such as btns, wells, etc

src/sass/uikit-bootstrap/_global.scss

@@ -331,6 +331,11 @@ p + p .cta-link {
 	}
 } // main-nav
 
+// main tag
+
+main {
+	@include text-overflow;
+}
 
 // Page header
 .page-header {