From: Mark Otto <markd.otto@gmail.com>
Date: Sun, 31 May 2020 03:49:23 +0000 (-0700)
Subject: Restore word-break: break-word on .text-break to fix text breaking on flex containers... 
X-Git-Tag: v5.0.0-alpha1~69
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c682e751bfc0bd259997ad2de3f78eb3001efdd7;p=thirdparty%2Fbootstrap.git

Restore word-break: break-word on .text-break to fix text breaking on flex containers (#30932)
---

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 73ba08c975..79e52fd328 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -440,7 +440,7 @@ $utilities: map-merge(
       values: italic normal
     ),
     "word-wrap": (
-      property: word-wrap,
+      property: word-wrap word-break,
       class: text,
       values: (break: break-word)
     ),
diff --git a/site/content/docs/5.0/utilities/text.md b/site/content/docs/5.0/utilities/text.md
index d7a8e97b09..aad34a35de 100644
--- a/site/content/docs/5.0/utilities/text.md
+++ b/site/content/docs/5.0/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 `word-wrap: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for wider browser support.
+Prevent long strings of text from breaking your components' layout by using `.text-break` to set `word-wrap: break-word` and `word-break: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for wider browser support, and add the deprecated `word-break: break-word` to avoid issues with flex containers.
 
 {{< example >}}
 <p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>