CSS word-break Property

Definition and Usage

The word-break property controls whether line breaks may appear inside words when text would otherwise overflow its content box. It is most useful for long URLs, hashes, and unbroken strings in narrow cards, table cells, or chat bubbles.

The property is inherited. The initial value is normal. Pair it with overflow-wrap and white-space when you tune wrapping behavior.

CSS Syntax

Example: word-break: break-all;. Use one keyword at a time.

Property Values

How to Use word-break

Give the text a fixed width, then choose how aggressively long strings may split.

1. Put text in a box with a constrained width (card, column, or table cell).
2. Start with normal. Switch to break-all only for URLs, hashes, or similar tokens.
3. For everyday paragraphs, prefer overflow-wrap: anywhere or break-word so breaks happen only when needed.
4. For CJK copy that should stay together, try keep-all. Set the correct lang on the document or element.

Live Preview

A narrow box with one long string. Change word-break and watch whether the text wraps or overflows.

CSS Examples

Each snippet focuses on word-break in a narrow box so the wrap behavior is easy to see. Use Try It Yourself for a live editor.

<style>
  p {
    width: 160px;
    border: 1px solid #334155;
    padding: 8px;
    word-break: normal;
  }
</style>

<p>Thisisaverylongwordthathasnospace</p>

<style>
  p {
    width: 160px;
    border: 1px solid #334155;
    padding: 8px;
    word-break: break-all;
  }
</style>

<p>https://example.com/docs/very/long/path?id=12345</p>

<style>
  p {
    width: 160px;
    border: 1px solid #334155;
    padding: 8px;
    word-break: keep-all;
  }
</style>

<p lang="zh">這是一個非常長的詞組用來示範</p>

Key Takeaways