Text

Text Utilities

Utilities for text.

HTML

<style>
.Test-box {
    background: #aaa;
    color: #000;
    margin-bottom: 10px;
    max-width: 400px;
}
</style>

Text Breaks

Breaks stings across multiple lines, when they are wider than the container.

http://subdomain.exampledomain.com/averylongurlthatneedstobebrokenotherwiseitisgoingtokeepgoingforever

wraplongwords dontbreaklongwords wraplongwords dontbreaklongwords wraplongwords dontbreaklongwords wraplongwords dontbreaklongwords wraplongwords dontbreaklongwords

HTML

<div class="Test-box u-textBreak">
    http://subdomain.exampledomain.com/averylongurlthatneedstobebrokenotherwiseitisgoingtokeepgoingforever
</div>
<div class="Test-box u-textBreak">
    wraplongwords dontbreaklongwords
    wraplongwords dontbreaklongwords
    wraplongwords dontbreaklongwords
    wraplongwords dontbreaklongwords
    wraplongwords dontbreaklongwords
</div>

Text Alignment

Used to control text alignment and justification.

Lorem ipsum dolor sit amet.

HTML

<div class="Test-box u-textCenter">
    Lorem ipsum dolor sit amet.
</div>
<div class="Test-box u-textLeft">
    Lorem ipsum dolor sit amet.
</div>
<div class="Test-box u-textRight">
    Lorem ipsum dolor sit amet.
</div>

Text Inherit Color

Should inherit the color set by an ancestor. (Useful for linked anchor elements.)

Should always be black

HTML

<div class="Test-box">
  <a class="u-textInheritColor" href="#pound">Should always be black</a>
</div>

Text Kerning

Should enable kerning in the supported browsers.

The quick brown fox jumps over the lazy dog (default)

The quick brown fox jumps over the lazy dog (kerning enabled)

HTML

<div style="font-family:arial;font-size:20px">
  <div>The quick brown fox jumps over the lazy dog (default)</div>
  <div class="u-textKern">The quick brown fox jumps over the lazy dog (kerning enabled)</div>
</div>

Text Wrap

Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit blandit dolor, at euismod ante eleifend in. Duis imperdiet cursus nibh, quis tincidunt nibh rhoncus at.

HTML

<div class="Test-box u-textWrap">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit blandit dolor, at euismod ante eleifend in. Duis imperdiet cursus nibh, quis tincidunt nibh rhoncus at.
</div>

Text No Wrap

Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit blandit dolor, at euismod ante eleifend in. Duis imperdiet cursus nibh, quis tincidunt nibh rhoncus at.

HTML

<div class="Test-box u-textNoWrap">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit blandit dolor, at euismod ante eleifend in. Duis imperdiet cursus nibh, quis tincidunt nibh rhoncus at.
</div>

Text Truncate

Should truncate the text to a single line with ellipsis at the end.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit blandit dolor, at euismod ante eleifend in. Duis imperdiet cursus nibh, quis tincidunt nibh rhoncus at.

HTML

<div class="Test-box u-textTruncate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit blandit dolor, at euismod ante eleifend in. Duis imperdiet cursus nibh, quis tincidunt nibh rhoncus at.
</div>

Text Transform

Should capitalize or uppercase text

lorem ipsum dolor sit amet

HTML

<div class="Test-box u-textUpper">
    lorem ipsum dolor sit amet
</div>
<div class="Test-box u-textCap">
    lorem ipsum dolor sit amet
</div>