Control text alignment, wrapping, overflow, transforms and more.

Text alignment

Alignment helper classes allow you to easily re-align text.

There are also available alignment classes that support responsive displays.

Text wrapping and overflow

You can prevent wrapping text with the .text-no-wrap utility class.

Longer content can be truncated with a text ellipsis. Requires display: inline-block or display: block.

Text transform

Text can be transformed with text capitalization classes.

Text breaking and the removal of text-transform is also possible. In the first example, the text-transform: uppercase custom class is overwritten and allows the text casing to remain. In the second example, we break up a longer word to fit the available space.`

Font weights and italics

Material design, by default, supports 100, 300, 400, 500, 700, 900 font weights and italicized text.

RTL agnostic alignment

When using RTL, you may want to keep the alignment regardless of the rtl designation.

Edit this page on Github | Translate on Crowdin