Text

Text

CSS gives you total control over text: alignment, decoration, case, and spacing.

text-align

Line up text inside its container:

div {
  text-align: left;        /* default */
  text-align: right;
  text-align: center;
  text-align: justify;     /* stretch to both edges */
}

text-decoration

Add lines around or under text:

a {
  text-decoration: none;      /* remove underline from links */
}
p.over {
  text-decoration: overline;
}
p.thru {
  text-decoration: line-through;
}
p.u {
  text-decoration: underline;
}

text-transform

Change case:

p {
  text-transform: uppercase;
  text-transform: lowercase;
  text-transform: capitalize;   /* every word's first letter */
}

letter-spacing and word-spacing

h1 {
  letter-spacing: 3px;   /* space between letters */
  word-spacing: 8px;     /* space between words */
}

line-height

Vertical space between lines. Using a unitless number (1.5) is best:

p {
  line-height: 1.5;
}

white-space

How spaces/newlines are treated:

p {
  white-space: nowrap;    /* no wrapping */
  white-space: pre;       /* respects line breaks */
}

text-shadow

Give text a shadow:

h1 {
  text-shadow: 2px 2px 5px red;
}

Order: horizontal, vertical, blur, color.

text-overflow

When a single line overflows, show an ellipsis:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

TL;DR

• text-align: left/right/center/justify.
• text-decoration: underline, none, etc.
• text-transform: upper/lower/capitalize.
• letter-spacing, word-spacing, line-height.
• text-shadow: 2px 2px 5px color.
• text-overflow: ellipsis for nice truncation.