<div class="ch-text--left">Left-aligned text</div>
<div class="ch-text--center">Center-aligned text</div>
<div class="ch-text--right">Right-aligned text</div>

<div class="ch-text--lowercase">LOWERCASED TEXT</div>
<div class="ch-text--uppercase">uppercased text</div>
<div class="ch-text--capitalize">capitalized text</div>

<div class="ch-fw--400">Font-weight 400 (Gotham Book)</div>
<div class="ch-fw--500">Font-weight 500 (Gotham Medium)</div>
<div class="ch-fw--600">Font-weight 600 (Gotham Bold)</div>
<div class="ch-fw--800">Font-weight 800 (Gotham Black)</div>
<div class="ch-text--italic">Italicized text</div>
<a class="ch-text-decoration--none">Text decoration none</a>

<div class="ch-width--3 ch-text--ellipsis">
  Overflow behavior: display an ellipsis to represent clipped text
</div>
<div class="ch-width--3 ch-text--clip" style="height:20px;">
  Overflow behavior: truncate the text
</div>
<div class="ch-width--3 ch-text--nowrap">
  Whitespace behavior: prevent text from wrapping onto multiple lines
</div>

<div class="ch-text--balance">
  We guarantee the best used car deals in the UK
</div>

Impact of ch-text--balance

Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, this value is only supported for blocks of text spanning a limited number of lines (six or less for Chromium and ten or less for Firefox). MDN - text-wrap: balance

<!-- Responsive eg... -->
<div class="[sl,sm,md,lg]:ch-text--*"></div>

<!-- This particular example: -->
<div class="sl:ch-fw--500 sm:ch-text--italic md:ch-text--uppercase">
  Responsive: resize the screen to see how the breakpoints apply the text
  utilities
</div>

Having trouble with flex and ch-text--ellipsis?

If you find that the ellipsis utility class doesn't work with your flexbox layout, you may need to add min-width: 1px to the containing element.