Use word-wrap in .text-break for IE and Edge compatibility.

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 7c53a44c40622547cd851d2c6e1e5cea18362b0d..32312daf9887cf0f8f746b4be7da1071f4f5d70c 100644 (file)
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -434,7 +434,7 @@ $utilities: map-merge(
       values: italic normal
     ),
     "overflow-wrap": (
-      property: overflow-wrap word-break, // word-break for IE & < Edge 18
+      property: overflow-wrap word-wrap, // word-wrap for IE & < Edge 18
       class: text,
       values: (break: break-word)
     ),

diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss
index bfa9f6e9ad88ce10eac705bfc0559fcc2c5890c6..354f5648b8f860800fee8919b0be4db000624711 100644 (file)
--- a/scss/mixins/_reset-text.scss
+++ b/scss/mixins/_reset-text.scss
@@ -1,6 +1,6 @@
 @mixin reset-text {
   font-family: $font-family-base;
-  // We deliberately do NOT reset font-size or word-wrap.
+  // We deliberately do NOT reset font-size or overflow-wrap / word-wrap.
   font-style: normal;
   font-weight: $font-weight-normal;
   line-height: $line-height-base;

diff --git a/site/content/docs/4.3/utilities/text.md b/site/content/docs/4.3/utilities/text.md
index 88f595b16ffeb0b57f664b678c855cf60640f482..00057da259f299ba9b6eddfcb4deef0a2aea5f36 100644 (file)
--- a/site/content/docs/4.3/utilities/text.md
+++ b/site/content/docs/4.3/utilities/text.md
@@ -45,7 +45,7 @@ Prevent text from wrapping with a `.text-nowrap` class.
 
 ## Word break
 
-Prevent long strings of text from breaking your components' layout by using `.text-break` to set `overflow-wrap: break-word` (and `word-break: break-word` for IE & Edge compatibility).
+Prevent long strings of text from breaking your components' layout by using `.text-break` to set `overflow-wrap: break-word` (and `word-wrap: break-word` for IE & Edge compatibility).
 
 {{< example >}}
 <p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>