Typographic helpers

<span class="ellipsis">Lorem ipsum dolor</span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis auctor lectus eu massa fermentum scelerisque. Praesent vitae massa vel nulla sodales consectetur in vitae urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
To be used with mw100 and inbl (or with flexbox helpers).

If you need a multiline ellipsis, use ellipsis-four-lines helper.
<span class="uppercase">Lorem ipsum dolor</span>
Applies a text-transform: uppercase to element: Lorem ipsum dolor
<span class="capitalize">Lorem ipsum dolor</span>
Applies a text-transform: capitalize to element: Lorem ipsum dolor
<span class="strong">Lorem ipsum dolor</span>
<span class="bold">Lorem ipsum dolor</span>
if you need to be bold without using strong tag. bold class is an alias for this.
<span class="italic">Lorem ipsum dolor</span>
if you need to be italic without using em or i tag
<span class="lh-standard">Lorem ipsum dolor</span>
Applies standard line-height (defined with Sass variable $l-h in design-system-config) to element. This helps to fix some issues caused by vertical rythm formulas (if you want to reduce line-height, you may use lh100, but use it wisely, it may create issues with user-generated content).
<span class="cut">Lorem ipsum dolor</span>
Applies basic hyphenation to text
<span class="break">Lorem ipsum dolor</span>
Applies only word-wrap: break-word; to element (when hyphenation is not needed)
<span class="nodecoration">Lorem ipsum dolor</span>
Applies text-decoration: none to element
<span class="underline">Lorem ipsum dolor</span>
Applies text-decoration: underline to element
<span class="underline-hover">Lorem ipsum dolor</span>
Applies text-decoration: underline to element only when hovered/focused.
<p class="alignright">Right-aligned text.</p>

Right-aligned text

<p class="aligncenter">Centered-aligned text.</p>

Centered-aligned text

<p class="alignleft">Left-aligned text.</p>

Left-aligned text

Other text alignment helpers: aligntop,alignbottom, alignmiddle may be used (alignsub and alignbaseline are also available).

<p>Example of <button class="link alignbaseline">why alignbaseline is useful</button>…</p>

Example of (fixes some alignments)

<p class="pre-wrap">A text with
new lines
and long             spaces</p>

A text with new lines and long spaces

These helpers may be prefixed by ontablet-/onmobile- to apply them only for tablets/mobiles. alignsub is also available.