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-justify">Ambitioni dedisse scripsisse iudicaretur...</p>
This text is left aligned.
This text is center aligned.
This text is right aligned.
<p class="_text-left">This text is left aligned.</p>
<p class="_text-center">This text is center aligned.</p>
<p class="_text-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 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.
<p class="_text-center-xs">Center aligned text on xs viewport size.</p>
<p class="_text-center-sm">Center aligned text on sm viewport size.</p>
<p class="_text-center-md">Center aligned text on md viewport size.</p>
<p class="_text-center-lg">Center aligned text on lg viewport size.</p>
<p class="_text-center-xl">Center aligned text on xl viewport size.</p>
Text wrapping and overflow
You can wrap text using the ._text-wrap utility class.
<p class="_text-wrap" style="width: 100px;">This text should wrap.</p>
You can also prevent text from wrapping with a ._text-nowrap utility class.
This text should overflow the parent.
<p class="_text-nowrap" 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>
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.
Thisisaverylongwordwhichwillbreakourlayoutifwedonotusethetextbreakutilityclass
<p class="_text-break">Thisisaverylongwordwhichwillbreakourlayoutifwedonotusethetextbreakutilityclass</p>
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-lowercase">This text is lowercase.</p>
<p class="_text-uppercase">This text is uppercase.</p>
<p class="_text-capitalize">This text is capitalized.</p>
Font weights and italics
You can change the weight (boldness) of your text italicize it using these utility classes.
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>
<p class="_font-italic">Italic text.</p>
Monospace
Change your text to be monospaced using the ._text-monospace utility.
<p class="_text-monospace">This text is monospace.</p>
Text decoration
Remove text decoration using the ._text-decoration-none utility.
<a class="_text-decoration-none" href="..">This link is not underlined.</a>
Muted text
Make your text stand out less using the ._text-muted utility.
<p class="_text-muted">This text is muted.</p>
Text reset
Make your text or link inherit the parent's color using the ._text-reset utility.
This text is muted and has a reset link.
<p class="_text-muted">This text is muted and has a <a class="_text-reset" href="..">text reset link</a>.</p>
Inkline