CSS Text

text-align

text-align controls horizontal alignment of text within its container.

h1 {
  text-align: center;
}

p {
  text-align: left;
}

.caption {
  text-align: right;
}

.body-copy {
  text-align: justify;
}

Values: left, right, center, justify.

text-decoration

text-decoration adds or removes lines on text.

/* Remove underline from links */
a {
  text-decoration: none;
}

/* Add underline */
.underlined {
  text-decoration: underline;
}

/* Strikethrough */
.deleted {
  text-decoration: line-through;
}

/* Line above text */
.overlined {
  text-decoration: overline;
}

text-transform

text-transform changes the capitalisation of text without editing the HTML.

.heading {
  text-transform: uppercase;
}

.label {
  text-transform: capitalize; /* capitalises first letter of each word */
}

.quote {
  text-transform: lowercase;
}

text-indent

Indents the first line of a paragraph.

p {
  text-indent: 2em;
}

letter-spacing and word-spacing

letter-spacing adjusts space between characters. word-spacing adjusts space between words.

h2 {
  letter-spacing: 0.05em;
}

p {
  word-spacing: 0.1em;
}

white-space

white-space: nowrap prevents text from wrapping onto a new line, even if it overflows the container.

.no-wrap {
  white-space: nowrap;
}

Text overflow

When text overflows its container, you can control what the browser shows.

overflow: hidden clips anything that spills outside the element. On its own, it just hides the overflow.

text-overflow: ellipsis adds ... at the point where the text is cut. It requires both overflow: hidden and white-space: nowrap to work.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

Multi-line truncation

To clamp text to a set number of lines and show ... at the end, use -webkit-line-clamp. Despite the vendor prefix, this is widely supported in all modern browsers.

.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

This limits the element to 3 lines of text and appends ... after the last visible line.