Text
Use text utilities to control text alignment, font weight, font style and more.
Text Alignment
Text alignment utilities are extended with the
screen width breakpoint postfixes.
They are named using the format: .ta-{direction}-{postfix}.
Let’s preview their effects through the below examples.
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="ta-left">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="ta-right">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="ta-center">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="ta-justify">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Font Weight
Font weight utility classes are named using the format: .fw-{value}.
We use meaningful value words in the class names,
all the value words are listed in the below table.
| Word | Value |
|---|---|
| lightest | 100 |
| lighter | 200 |
| light | 300 |
| regular | 400 |
| medium | 500 |
| semibold | 600 |
| bold | 700 |
| bolder | 800 |
| boldest | 900 |
When you use font weight utilities, make sure the value words you pick up are supported by the fonts you embedded in your projects. Otherwise, the font weight effects will not be visible.
Let’s preview the effects through the below examples.
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="fw-lightest">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="fw-lighter">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="fw-light">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="fw-regular">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="fw-medium">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="fw-semibold">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="fw-bold">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="fw-bolder">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="fw-boldest">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Font Style
There’re two font style utility classes, .fs-italic which sets the
value of the font-style property to italic and .fs-normal which
sets the value of the font-style property to normal.
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="fs-italic">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="fs-normal">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>
Text Transform
Text transform utility classes are named using the format .tt-{value}.
The value can be one of upper, lower and cap.
once upon time...
<p class="tt-upper">once upon time...</p>
ONCE UPON TIME...
<p class="tt-lower">ONCE UPON TIME...</p>
once upon time...
<p class="tt-cap">once upon time...</p>
Text Decoration
Text decoration utility classes are named using the format .td-{value}.
The value can be one of stroke, underline and none.
once upon time...
<p class="td-stroke">once upon time...</p>
once upon time...
<p class="td-underline">once upon time...</p>
once upon time...
<p class="td-none" style="text-decoration: underline">once upon time...</p>
Word Break
There’re two utility classes for breaking words.
The .wb-all class breaks a long word into newlines
and the .text-ellipsis class cuts a long word with ellipsis into a single line.
Let’s preview the effects in the below examples.
onceupontimeonceupontimeonceupontimeonceupontimeonceupontimeonceupontimeonceupontimeonceupontimeonceupontimeonceupontime
<p class="wb-all">onceupontimeonceupontimeonceupontimeonceupontimeonceupontimeonceupontimeonceupontimeonceupontimeonceupontimeonceupontime</p>
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters. Poor Cinderella had to work hard all day long so the others could rest. It was she who had to wake up each morning when it was still dark and cold to start the fire...
<p class="text-ellipsis">
Once upon time a girl named Cinderella lived with her stepmother and two stepsisters.
Poor Cinderella had to work hard all day long so the others could rest.
It was she who had to wake up each morning when it was still dark
and cold to start the fire...
</p>