Utilities - Text

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

Text Alignment

Use text alignment utilities to easily align text in components.

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.

<p class="_text-align:justify">
    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.
</p>

This text is left aligned.

This text is center aligned.

This text is right aligned.

<p class="_text-align:left">This text is left aligned.</p>

<p class="_text-align:center">This text is center aligned.</p>

<p class="_text-align:right">This text is right aligned.</p>

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

Center aligned text starting from xs viewport size.

Center aligned text starting from sm viewport size.

Center aligned text starting from md viewport size.

Center aligned text starting from lg viewport size.

Center aligned text starting from xl viewport size.

Center aligned text starting from xxl viewport size.

<p class="_xs:text-align:center">Center aligned text starting from xs viewport size.</p>

<p class="_sm:text-align:center">Center aligned text starting from sm viewport size.</p>

<p class="_md:text-align:center">Center aligned text starting from md viewport size.</p>

<p class="_lg:text-align:center">Center aligned text starting from lg viewport size.</p>

<p class="_xl:text-align:center">Center aligned text starting from xl viewport size.</p>

<p class="_xxl:text-align:center">Center aligned text starting from xxl viewport size.</p>

You can use the following text alignment utility classes:

  • _text-align:left or _text:left
  • _text-align:center or _text:center
  • _text-align:right or _text:right
  • _text-align:justify or _text:justify
  • _{xs|sm|md|lg|xl|xxl}:text-align:left or _{xs|sm|md|lg|xl|xxl}:text:left
  • _{xs|sm|md|lg|xl|xxl}:text-align:center or _{xs|sm|md|lg|xl|xxl}:text:center
  • _{xs|sm|md|lg|xl|xxl}:text-align:right or _{xs|sm|md|lg|xl|xxl}:text:right

Text Wrapping and Overflow

You can wrap text using the _white-space:normal utility class.

This text should wrap.

<p class="_white-space:normal" style="width: 100px;">
    This text should wrap.
</p>

You can also prevent text from wrapping with a _white-space:nowrap utility class.

This text should overflow the parent.

<p class="_white-space:nowrap _background:light" style="width: 100px;">
    This text should overflow the parent.
</p>

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.

This block text is truncated.
This inline text is truncated. 
<div class="_display:block _text:truncate" style="max-width: 180px;">
    This block text is truncated.
</div>

<span class="_display:inline-block _text:truncate" style="max-width: 150px;">
    This inline text is truncated.
</span>

You can use the following white space utility classes:

  • _white-space:normal or _text:wrap
  • _white-space:nowrap or _text:nowrap
  • _text:truncate
  • _{xs|sm|md|lg|xl|xxl}:white-space:normal or _{xs|sm|md|lg|xl|xxl}:text:wrap
  • _{xs|sm|md|lg|xl|xxl}:white-space:nowrap or _{xs|sm|md|lg|xl|xxl}:text:nowrap
  • _{xs|sm|md|lg|xl|xxl}:text:truncate

Word Break

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

Thisisaverylongwordwhichwillbreakourlayoutifwedonotusethetextbreakutilityclass

<p class="_text:break-word">
    Thisisaverylongwordwhichwillbreakourlayoutifwedonotusethetextbreakutilityclass
</p>

You can use the following word break utility classes:

  • _text:break-word

Text Transform

You can transform text in components using text capitalization classes.

This text is lowercase.

This text is uppercase.

This text is capitalized.

<p class="_text-transform:lowercase">This text is lowercase.</p>

<p class="_text-transform:uppercase">This text is uppercase.</p>

<p class="_text-transform:capitalize">This text is capitalized.</p>

You can use the following text transform utility classes:

  • _text-transform:lowercase or _text:lowercase
  • _text-transform:uppercase or _text:uppercase
  • _text-transform:capitalize or _text:capitalize

Font Weights and Italics

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

Extralight text.

Light text.

Normal text.

Semibold text.

Bold text.

Black text.

<p class="_font-weight:extralight">Extralight text.</p>

<p class="_font-weight:light">Light text.</p>

<p class="_font-weight:normal">Normal text.</p>

<p class="_font-weight:semibold">Semibold text.</p>

<p class="_font-weight:bold">Bold text.</p>

<p class="_font-weight:black">Black text.</p>

Lighter weight text (relative to the parent element).

Bolder weight text (relative to the parent element).

<p class="_font-weight:lighter">
    Lighter weight text (relative to the parent element).
</p>

<p class="_font-weight:bolder">
    Bolder weight text (relative to the parent element).
</p>

Italic text.

<p class="_font-style:italic">Italic text.</p>

You can use the following font weight and style utility classes:

  • _font-weight:extralight or _text:extralight
  • _font-weight:light or _text:light
  • _font-weight:normal or _text:normal
  • _font-weight:semibold or _text:semibold
  • _font-weight:bold or _text:bold
  • _font-weight:black or _text:black
  • _font-weight:lighter or _text:lighter
  • _font-weight:bolder or _text:bolder
  • _font-style:italic or _text:italic

Font Size

Change your font size using one of the font-size utilities.

Extra-small text.

Small text.

Medium text.

Large text.

Extra-large text.

<p class="_font-size:sm">Extra-small text.</p>

<p class="_font-size:sm">Small text.</p>

<p class="_font-size:md">Medium text.</p>

<p class="_font-size:lg">Large text.</p>

<p class="_font-size:xl">Extra-large text.</p>

You can use the following font weight utility classes:

  • _font-size:xs or _text:xs
  • _font-size:sm or _text:sm
  • _font-size:md or _text:md
  • _font-size:lg or _text:lg
  • _font-size:xl or _text:xl

Monospace

Change your text to be monospaced using the _font-family:monospace utility.

This text is monospace.

<p class="_font-family:monospace">This text is monospace.</p>

You can use the following font weight utility classes:

  • _font-family:monospace or _text:monospace

Text Decoration

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

This link is not underlined.
<a class="_text-decoration:none" href="..">
    This link is not underlined.
</a>

You can use the following text decoration utility classes:

  • _text-decoration:none

Muted Text

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

This text is muted.

<p class="_text:muted">
    This text is muted.
</p>

You can use the following text muted utility classes:

  • _text:muted or _color:muted

Text Reset

Make your text or link inherit the parent’s color using the _text:reset utility.

This text is muted and has a text reset link.

<p class="_text:muted">
    This text is muted and has a <a class="_text:reset" href="..">text reset link</a>.
</p>

You can use the following text reset utility classes:

  • _text:reset

Text Hide

You can make your text disappear without hiding the element by using the text-indent: -10000px trick. This is available through the following utility class:

  • _text:hide

Lists

You can use list utilities to obtain inline and unstyled lists.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
<ul class="_list:inline">
    <li>Lorem ipsum</li>
    <li>Phasellus iaculis</li>
    <li>Nulla volutpat</li>
</ul>

<hr class="_margin-y:2" />

<ul class="_list:unstyled">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
    <li>Facilisis in pretium nisl aliquet</li>
    <li>Nulla volutpat aliquam velit
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
</ul>