diff options
Diffstat (limited to 'site/content/docs/5.0/utilities/text.md')
| -rw-r--r-- | site/content/docs/5.0/utilities/text.md | 18 |
1 files changed, 11 insertions, 7 deletions
diff --git a/site/content/docs/5.0/utilities/text.md b/site/content/docs/5.0/utilities/text.md index a5defc6f19..d88022f7cc 100644 --- a/site/content/docs/5.0/utilities/text.md +++ b/site/content/docs/5.0/utilities/text.md @@ -8,17 +8,17 @@ toc: true ## Text alignment -Easily realign text to components with text alignment classes. For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. +Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. {{< example >}} -<p class="text-left">Left aligned text on all viewport sizes.</p> +<p class="text-start">Start aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> -<p class="text-right">Right aligned text on all viewport sizes.</p> +<p class="text-end">End aligned text on all viewport sizes.</p> -<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p> -<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p> -<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p> -<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p> +<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p> +<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p> +<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p> +<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p> {{< /example >}} {{< callout info >}} @@ -51,6 +51,10 @@ Prevent long strings of text from breaking your components' layout by using `.te <p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p> {{< /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. |