Add word-break utility class (#518)

* Add word-break utility class * Rename style guide to make link to page correct
CMSgov · Oct 17, 2019 · c9ce0d0 · c9ce0d0
1 parent 017476e
commit c9ce0d0
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 0 deletions.
diff --git 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
@@ -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;
+}