Text Utilities

Use common text utilities to control alignment, wrapping, weight, and more.

Text Alignment

Use text alignment utilities to easily align text in components.

Justify Alignment Example
Text Alignment Example

`For left, right, and center alignment, Inkline provides you with responsive classes that use the same breakpoints as the grid system.

Responsive Text Alignment Example

Text wrapping and overflow

You can wrap text using the ._text-wrap utility class.

Text Wrap Example

You can also prevent text from wrapping with a ._text-nowrap utility class.

Text No Wrap Example

Text wrapping utilities also come with breakpoint-specific classes, same as text alignment classes.

For longer content, adding the ._text-truncate utility class will truncate the text with an ellipsis. Truncation requires display: inline-block or display: block.

Text Truncation Example

Word break

Prevent long strings of text from breaking your layout by using ._text-break. Behind the scenes, it uses overflow-wrap: break-word and word-break: break-word for IE & Edge compatibility.

Word Break Example

Text transform

You can transform text in components using text capitalization classes.

Text Transform Example

Font weights and italics

You can change the weight (boldness) of your text italicize it using these utility classes.

Font Weight Example
Relative Font Weight Example
Italic Example


Change your text to be monospaced using the ._text-monospace utility.

Monospace Example

Text decoration

Remove text decoration using the ._text-decoration-none utility.

Text Decoration Example

Muted text

Make your text stand out less using the ._text-muted utility.

Text Muted Example

Text reset

Make your text or link inherit the parent's color using the ._text-reset utility.

Text Reset Example