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

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

There are also available alignment classes that support responsive displays.

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 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.`

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

Opacity helper classes allow you to easily adjust the emphasis of text. text--primary has the same opacity as default text. text--secondary is used for hints and helper text. De-emphasise text with text--disabled.

When using RTL, you may want to keep the alignment regardless of the rtl designation. This can be achieved using text alignment helper classes in the following format: text-<breakpoint>-<direction>, where breakpoint can be sm, md, lg, or xl and direction can be left or right. You may also want alignment to respond to rtl which can be done using directions start and end.

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!