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

Created by: florianlacreuse

Fix #29319 (closed)

word-break property is mostly use for East Asian languages, for soft wrap opportunities between letters commonly associated with languages like Chinese, Japanese, etc.

When the overflow-wrap property is not working (IE, Edge), we need to use the old word-wrap property as a fallback.

Note: If accepted and merged, this fix should be backported to v4.

scss/mixins/_reset-text.scss

 @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;

scss/_utilities.scss

@@ -433,8 +433,8 @@ $utilities: map-merge(
       class: font,
       values: italic normal
     ),
-    "overflow-wrap": (
-      property: overflow-wrap word-break, // word-break for IE & < Edge 18
+    "word-wrap": (
+      property: word-wrap,
       class: text,
       values: (break: break-word)
     ),

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 `word-wrap: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for wider browser support.
 
 {{< example >}}
 <p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>