From c9ce0d06e9d412e4716bf43e6806b9a96734a235 Mon Sep 17 00:00:00 2001
From: Hanna Liebl <hanna.liebl@gmail.com>
Date: Thu, 17 Oct 2019 10:14:01 -0400
Subject: [PATCH] Add word-break utility class (#518)

* Add word-break utility class

* Rename style guide to make link to page correct
---
 packages/core/src/utilities/_index.scss     |  1 +
 packages/core/src/utilities/word-break.scss | 24 +++++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 packages/core/src/utilities/word-break.scss

diff --git a/packages/core/src/utilities/_index.scss b/packages/core/src/utilities/_index.scss
index 815c499cfe..9518f055f8 100644
--- a/packages/core/src/utilities/_index.scss
+++ b/packages/core/src/utilities/_index.scss
@@ -19,3 +19,4 @@
 @import 'text-transform';
 @import 'truncate';
 @import 'vertical-align';
+@import 'word-break'
diff --git a/packages/core/src/utilities/word-break.scss b/packages/core/src/utilities/word-break.scss
new file mode 100644
index 0000000000..ca20cb0a95
--- /dev/null
+++ b/packages/core/src/utilities/word-break.scss
@@ -0,0 +1,24 @@
+/* stylelint-disable declaration-no-important */
+@import '@cmsgov/design-system-support/src/settings/index';
+
+/*
+Word Break
+
+Use the word break utility (`ds-u-word-break`) to prevent long strings of text from breaking layouts.
+
+Markup:
+<section class="ds-l-container preview__grid">
+  <div class="ds-l-row">
+    <div class="ds-l-col--3 ds-u-word-break">
+      <span class="ds-u-font-weight--bold">A long string:</span> Supercalifragilisticexpialidocious
+    </div>
+  </div>
+</section>
+
+Style guide: utilities.word-break
+*/
+.ds-u-word-break {
+  overflow-wrap: break-word;
+  // IE fallback
+  word-wrap: break-word;
+}