CSS word-wrap Property

Definition and Usage

The word-wrap property controls whether the browser may insert line breaks inside an otherwise unbreakable string — such as a long word or URL — so the text fits its line box instead of overflowing.

The initial value is normal. Unlike word-break, it breaks only when the whole word cannot fit on a line by itself. The standard name today is overflow-wrap; word-wrap is the same property under its older name.

CSS Syntax

Example: word-wrap: break-word;. Same keywords as overflow-wrap.

Property Values

How to Use word-wrap

Constrain the text box, then choose whether long strings may break inside a word.

1. Give the text a limited width (a card, sidebar, or max-width).
2. Leave normal if words should only break at spaces.
3. Set break-word for most UI text and long URLs in narrow boxes.
4. In new projects, write overflow-wrap instead — same values, standard name.

Live Preview

A narrow box holds one long word. Change word-wrap and watch whether the word breaks or sticks out.

CSS Examples

Each snippet focuses on word-wrap. The narrow width is only there so a long string can overflow. Use Try It Yourself for a live editor.

<style>
  p {
    width: 140px;
    word-wrap: normal;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<p>Supercalifragilisticexpialidocious</p>

<style>
  p {
    width: 140px;
    word-wrap: break-word;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<p>https://example.com/very/long/path/name</p>

<style>
  p {
    width: min-content;
    max-width: 140px;
    word-wrap: anywhere;
    border: 1px solid #cbd5e1;
    padding: 8px;
  }
</style>

<p>Supercalifragilisticexpialidocious</p>

Key Takeaways