diff options
| -rw-r--r-- | scss/_utilities.scss | 2 | ||||
| -rw-r--r-- | site/content/docs/5.0/utilities/text.md | 2 |
2 files changed, 2 insertions, 2 deletions
diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 73ba08c97..79e52fd32 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 d7a8e97b0..aad34a35d 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> |