diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 38760bdd70..e152fb7716 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -114,11 +114,14 @@ .text-decoration-none { text-decoration: none !important; } +/* rtl:begin:remove */ .text-break { word-break: break-word !important; // Deprecated, but avoids issues with flex containers word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy } +/* rtl:end:remove */ + // Reset .text-reset { color: inherit !important; } diff --git a/site/content/docs/4.6/utilities/text.md b/site/content/docs/4.6/utilities/text.md index b9a6bdb638..4b854befa5 100644 --- a/site/content/docs/4.6/utilities/text.md +++ b/site/content/docs/4.6/utilities/text.md @@ -72,6 +72,10 @@ Prevent long strings of text from breaking your components' layout by using `.te

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

{{< /example >}} +{{< callout warning >}} +Note that [breaking words isn't possible in Arabic](https://rtlstyling.com/posts/rtl-styling#3.-line-break), which is the most used RTL language. Therefore `.text-break` is removed from our RTL compiled CSS. +{{< /callout >}} + ## Text transform Transform text in components with text capitalization classes.