CSS white-space, word-break and overflow-wrap

Text normally wraps at spaces and collapses extra spaces and line breaks into one. A few properties change that.

white-space

Value	Result
`normal`	Collapse spaces, wrap lines (default)
`nowrap`	Collapse spaces, never wrap
`pre`	Keep spaces and line breaks exactly, no wrap (like `<pre>`)
`pre-wrap`	Keep spaces and line breaks, but wrap when needed

index.html

HTML

<style>
  .box { width: 200px; border: 1px solid #1a5276; padding: 6px; margin-bottom: 8px; background: #f4f9fc; }
  .nowrap { white-space: nowrap; overflow: hidden; }
</style>
<div class="box">Normal wrapping keeps text inside the box.</div>
<div class="box nowrap">nowrap keeps this on one line and the box clips it.</div>

Long words and URLs

A long word, like a web address, can’t break at a space and may overflow the box.

index.html

HTML

<style>
  .box { width: 160px; border: 1px solid #d94a00; padding: 6px; margin-bottom: 8px; }
  .wrap { overflow-wrap: anywhere; }
</style>
<div class="box">https://example.com/a/very/long/address/that/does/not/fit</div>
<div class="box wrap">https://example.com/a/very/long/address/that/does/not/fit</div>

overflow-wrap: break-word (or anywhere) breaks a long word only when it would otherwise overflow. This is the one to use.
word-break: break-all breaks words anywhere, even when not necessary. It can look chopped, so use it sparingly.

Cut with an ellipsis

To show “…” when text is too long for one line, combine three properties:

style.css

CSS

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

warning

Ellipsis not showing

text-overflow: ellipsis only works when the element is a block with a limited width, overflow is not visible, and white-space: nowrap is set. Missing any of the three means no dots.