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

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

Text Alignment Example

This text is left aligned.

This text is center aligned.

This text is right aligned.

`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

Center aligned text on xs viewport size.

Center aligned text on sm viewport size.

Center aligned text on md viewport size.

Center aligned text on lg viewport size.

Center aligned text on xl viewport size.

Text wrapping and overflow

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

Text Wrap Example

This text should wrap.

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

Text No Wrap Example

This text should overflow the parent.

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
This block text is truncated.
This inline text is truncated.

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

Thisisaverylongwordwhichwillbreakourlayoutifwedonotusethetextbreakutilityclass

Text transform

You can transform text in components using text capitalization classes.

Text Transform Example

This text is lowercase.

This text is uppercase.

This text is capitalized.

Font weights and italics

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

Font Weight Example

Extralight text.

Light text.

Normal text.

Semibold text.

Bold text.

Black text.

Relative Font Weight Example

Lighter weight text (relative to the parent element).

Bolder weight text (relative to the parent element).

Italic Example

Italic text.

Monospace

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

Monospace Example

This text is monospace.

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

This text is muted.

Text reset

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

Text Reset Example

This text is muted and has a reset link.