Evo

Text Style

Change the style of text.

text-[align]

text-left

The best time to plant a tree was 20 years ago. The second best time is now. –Chinese Proverb

text-center

The best time to plant a tree was 20 years ago. The second best time is now. –Chinese Proverb

text-right

The best time to plant a tree was 20 years ago. The second best time is now. –Chinese Proverb

<p class="text-right">The best time to plant a tree was 20 years ago...</p>

Create a container for your text such as a <p> tag or <h1> tag, and apply a text-[align] class such as text-right.

text-[capcase]

text-capitalize

Eighty percent of success is showing up. –Woody Allen

text-uppercase

Eighty percent of success is showing up. –Woody Allen

text-lowercase

Eighty percent of success is showing up. –Woody Allen

text-capcase-none

Eighty percent of success is showing up. –Woody Allen

<p class="text-uppercase">Eighty percent of success is showing up. –Woody Allen</p>

Create a container for your text such as a <p> tag or <h1> tag, and apply a text-[capcase] class such as text-uppercase.

text-[line]

text-line-over

You can never cross the ocean until you have the courage to lose sight of the shore. –Christopher Columbus

text-line-middle

You can never cross the ocean until you have the courage to lose sight of the shore. –Christopher Columbus

text-line-under

You can never cross the ocean until you have the courage to lose sight of the shore. –Christopher Columbus

text-line-over-under

You can never cross the ocean until you have the courage to lose sight of the shore. –Christopher Columbus

text-line-all

You can never cross the ocean until you have the courage to lose sight of the shore. –Christopher Columbus

text-line-none

You can never cross the ocean until you have the courage to lose sight of the shore. –Christopher Columbus

<p class="text-line-under">You can never cross the ocean until you have the courage...</p>

Create a container for your text such as a <p> tag or <h1> tag, and apply a text-[line] class such as text-line-under.

text-[overflow]

text-truncate text-measure-4

The best revenge is massive success. –Frank Sinatra

text-clip text-measure-4

The best revenge is massive success. –Frank Sinatra

<p class="text-truncate">The best revenge is massive success. –Frank Sinatra</p>

Create a container for your text such as a <p> tag or <h1> tag, and apply a text-[overflow] class such as text-truncate, followed by functionality to truncate the text such as the text-measure-4 class.