Text Utility Classes Documentation

This documentation covers the available SCSS utility classes for text styling, including alignment, font styles, weights, decorations, and more.

Text Ellipsis (Multi-line Truncation)

Class	Description
`.text-dotted-1` to `.text-dotted-10`	Truncates text after 1-10 lines with an ellipsis.

This text will be truncated after 2 lines with an ellipsis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Alignment

Class	Description
`.text-left`	Aligns text to the left
`.text-center`	Centers text
`.text-right`	Aligns text to the right
`.text-justify`	Justifies text
`.text-start`	Aligns text to the start
`.text-end`	Aligns text to the end
`.text-inherit`	Inherits text alignment

This text is centered.

Font Styles

Class	Description
`.text-i`, `.text-italic`	Sets font style to italic
`.text-n`, `.text-normal`	Sets font style to normal
`.text-oblique`	Sets font style to oblique

This text is italic.

Usage Examples

Centered bold text with ellipsis


<p class="text-center text-bold text-ellipsis">Centered bold text with ellipsis</p>
<span class="text-dotted-2 text-uppercase">Two-line truncated UPPERCASE text</span>
<label class="mandatory">Required Field</label>
<p class="text-500 text-dashed">Medium weight text with dashed underline</p>