Chapter 16: CSS Text

Text Rendering

This text is red

Line-through

Overline + Underline

Thick underline

Text Decoration Styles

Double

Dotted

Dashed

Wavy

Shorthand

Text Transform

Uppercase

lowercase

Capitalize First Letter

Handling White Spaces

This text preserves line breaks and spaces.

Text Overflow

Overflow Clip Example: this text is clipped

Overflow Ellipsis Example: this text will show ...

Word Wrap

This paragraph has a verylongwordthatneedstobebroken properly.

Word Break

Keep-all: thisisaverylongwordthatdoesnotbreak

Break-word: thisisaverylongwordthatbreaks

Break-all: thisisaverylongwordthatbreakseverywhere

Text Spacing

Letter Spacing -1px

Letter Spacing 1px

Word Spacing -5px

Word Spacing 5px

Line Height 80%

Line Height 2.3

Vertically Centered Text

Text Position

Left Align

Center Align

Right Align

Justify Align

Text Indent 30px

CSS Fonts

Font Family Example

Font Size 2.5rem

Bold Text

Italic Text

Small Caps Text

@font-face Font Example