CSS Text Wrapping Techniques

Text wrapping is one of those CSS challenges that seems simple until you run into edge cases. Here are the key properties you should know.

word-wrap / overflow-wrap

The overflow-wrap property (formerly word-wrap) tells the browser whether to break words that overflow their container:

.container {
  overflow-wrap: break-word;
}

white-space

Controls how whitespace is handled:

/* No wrapping at all */
.nowrap { white-space: nowrap; }

/* Preserve whitespace and line breaks */
.pre { white-space: pre-wrap; }

text-overflow

For single-line truncation with an ellipsis:

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

Modern Approach

With modern CSS, you can also use line-clamp for multi-line truncation:

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

These techniques are essential for building responsive layouts that handle dynamic content gracefully.