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/ellipsis-two-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="capitalize-sentence">Lorem Ipsum Dolor</span>
Unlike previous rule capitalizes only the first word, element has to be block:
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="semibold">Lorem ipsum dolor</span>
If you need to be semibold: Lorem ipsum dolor.
<span class="italic">Lorem ipsum dolor</span>
if you need to be italic without using em or i tag
<span class="strike">Lorem ipsum dolor</span>
  
if you need to be strike, please use wisely.
<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

<p class="pre">A text with  spaces</p>

A text with spaces

<p class="no-wrap">no wrapping.</p>

Applies white-space: no-wrap, for some very rare use-cases (better use ellipsis)

If you want to apply ellipsis and pre classes, you need to wrap your content like this:

<span class="ellipsis"><span class="pre">Lorem    ipsum dolor sit amet</span></span>
Lorem ipsum dolor sit amet
To be used with mw100 and inbl (or with flexbox helpers).

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