CSStext-overflow, white-space, word-break

text-overflow, white-space, word-break

These properties control how text behaves when it overflows or needs to wrap. text-overflow adds ellipsis, white-space controls wrapping, word-break controls line breaks.

Text Overflow

CSS
/* Text ellipsis (truncation) */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Displays as: Text that is too lon... */
}

/* Multiple line truncation */
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Shows 3 lines max, then ellipsis */
}
White Space Handling

Value

Wraps

Spaces

Use

normal

Yes

Collapsed

Default text

nowrap

No

Collapsed

Single line

pre

No

Preserved

Code formatting

pre-wrap

Yes

Preserved

Formatted text

CSS
/* White space values */
.normal {
  white-space: normal;
  /* Wraps, multiple spaces collapse */
}

.nowrap {
  white-space: nowrap;
  /* Doesn't wrap, forces single line */
}

.pre {
  white-space: pre;
  /* Preserves spaces and newlines */
  font-family: monospace;
}

.pre-wrap {
  white-space: pre-wrap;
  /* Preserves formatting, wraps text */
}
Word Break

CSS
/* Word breaking */
.break-word {
  word-break: break-word;
  /* Breaks long words if needed */
}

.break-all {
  word-break: break-all;
  /* Breaks at any character if needed */
}

.normal {
  word-break: normal;
  /* Default, respects word boundaries */
}

/* Word wrap (overflow-wrap) */
.overflow-wrap {
  overflow-wrap: break-word;
  /* Breaks long words to fit container */
}
Note
text-overflow adds ellipsis. white-space controls wrapping. word-break controls line breaks. Combine for text truncation effects.
Next
Multi-column layout: [Multi-Column Layout (columns)](/css/columns).