text demos

• font-size
• font-style
• font-weight
• line-height
• letter-spacing
• word-spacing
• list-style-position
• list-style-type
• text-align
• text-align (sm)
• text-align (md)
• text-align (lg)
• text-decoration-line
• text-decoration-thickness
• text-underline-offset
• text-transform
• text-overflow
• user-select
• cursor

font-size

This is fs-0

This is fs-1

This is fs-2

This is fs-3

This is fs-4

This is fs-5

font-style

This is fs-italic

This is fs-normal

This is fs-oblique

font-weight

This is fw-bold

This is fw-bolder

This is fw-lighter

This is fw-normal

This is fw-100

This is fw-200

This is fw-300

This is fw-400

This is fw-500

This is fw-600

This is fw-700

This is fw-800

This is fw-900

line-height

This is lh-0. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium itaque cupiditate voluptas? Quaerat quo, magni ipsam architecto nostrum libero repudiandae dolorem id veniam dolorum voluptas facilis numquam voluptatum unde accusantium.

This is lh-1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium itaque cupiditate voluptas? Quaerat quo, magni ipsam architecto nostrum libero repudiandae dolorem id veniam dolorum voluptas facilis numquam voluptatum unde accusantium.

This is lh-2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium itaque cupiditate voluptas? Quaerat quo, magni ipsam architecto nostrum libero repudiandae dolorem id veniam dolorum voluptas facilis numquam voluptatum unde accusantium.

This is lh-3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium itaque cupiditate voluptas? Quaerat quo, magni ipsam architecto nostrum libero repudiandae dolorem id veniam dolorum voluptas facilis numquam voluptatum unde accusantium.

This is lh-4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium itaque cupiditate voluptas? Quaerat quo, magni ipsam architecto nostrum libero repudiandae dolorem id veniam dolorum voluptas facilis numquam voluptatum unde accusantium.

This is lh-5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium itaque cupiditate voluptas? Quaerat quo, magni ipsam architecto nostrum libero repudiandae dolorem id veniam dolorum voluptas facilis numquam voluptatum unde accusantium.

letter-spacing

This is ls-0

This is ls-1

This is ls-2

This is ls-3

This is ls-4

This is ls-5

word-spacing

This is ws-0

This is ws-1

This is ws-2

This is ws-3

This is ws-4

This is ws-5

list-style-position

• this is lsp-inside
• this is lsp-inside
• this is lsp-inside

• this is lsp-outside
• this is lsp-outside
• this is lsp-outside

list-style-type

• this is lst-circle
• this is lst-circle
• this is lst-circle

• this is lst-decimal
• this is lst-decimal
• this is lst-decimal

• this is lst-decimal-leading-zero
• this is lst-decimal-leading-zero
• this is lst-decimal-leading-zero

• this is lst-disc
• this is lst-disc
• this is lst-disc

• this is lst-lower-alpha
• this is lst-lower-alpha
• this is lst-lower-alpha

• this is lst-lower-roman
• this is lst-lower-roman
• this is lst-lower-roman

• this is lst-none
• this is lst-none
• this is lst-none

• this is lst-square
• this is lst-square
• this is lst-square

• this is lst-upper-alpha
• this is lst-upper-alpha
• this is lst-upper-alpha

• this is lst-upper-roman
• this is lst-upper-roman
• this is lst-upper-roman

text-align

This is ta-center

This is ta-justify. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime omnis quis voluptatum libero a atque veniam ab magni, nobis quas ut neque soluta autem suscipit eos assumenda excepturi quo voluptas?

This is ta-left

This is ta-right

This is ta-start

This is ta-end

text-align (sm)

This is ta-center

This is ta-justify. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime omnis quis voluptatum libero a atque veniam ab magni, nobis quas ut neque soluta autem suscipit eos assumenda excepturi quo voluptas?

This is ta-left

This is ta-right

This is ta-start

This is ta-end

text-align (md)

This is ta-center

This is ta-justify. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime omnis quis voluptatum libero a atque veniam ab magni, nobis quas ut neque soluta autem suscipit eos assumenda excepturi quo voluptas?

This is ta-left

This is ta-right

This is ta-start

This is ta-end

text-align (lg)

This is ta-center

This is ta-justify. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime omnis quis voluptatum libero a atque veniam ab magni, nobis quas ut neque soluta autem suscipit eos assumenda excepturi quo voluptas?

This is ta-left

This is ta-right

This is ta-start

This is ta-end

text-decoration-line

This is tdl-line-through

This is tdl-none

This is tdl-overline

This is tdl-underline

text-decoration-thickness

This is tdt-0

This is tdt-1

This is tdt-2

This is tdt-3

This is tdt-4

This is tdt-5

text-decoration-style

This is tds-dashed

This is tds-dotted

This is tds-double

This is tds-solid

This is tds-wavy

text-underline-offset

This is tuo-0

This is tuo-1

This is tuo-2

This is tuo-3

This is tuo-4

This is tuo-5

text-transform

This is tt-capitalized

This is tt-lowercase

This is tt-none

This is tt-uppercase

text-overflow

This is to-ellipsis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maxime ab voluptate fuga nobis, incidunt ratione, dignissimos accusamus provident atque repellendus sapiente nemo debitis maiores consequuntur ipsam repellat ullam sed?

This is to-clip. Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maxime ab voluptate fuga nobis, incidunt ratione, dignissimos accusamus provident atque repellendus sapiente nemo debitis maiores consequuntur ipsam repellat ullam sed?

user-select

This is us-all

This is us-auto

This is us-contain

This is us-none

This is us-text

cursor