CssHow-ToBeginner · 3 min read

How to Use word-break in CSS for Text Wrapping Control

Use the word-break CSS property to control how words break when reaching the end of a line. Common values are normal, break-all, and keep-all, which let you decide if words break normally, break anywhere, or avoid breaking in certain languages.

📐

Syntax

The word-break property controls how words break when they reach the end of a line in a container. It accepts these main values:

normal: Break words only at allowed break points (default).
break-all: Break words at any character to prevent overflow.
keep-all: Prevent word breaks for non-CJK (Chinese, Japanese, Korean) text.

css

word-break: normal;
word-break: break-all;
word-break: keep-all;

💻

Example

This example shows how word-break affects long words inside a fixed-width box. The first box uses normal, the second uses break-all to break words anywhere, and the third uses keep-all to avoid breaking words.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>word-break Example</title>
<style>
  .box {
    width: 200px;
    border: 1px solid #333;
    margin-bottom: 1rem;
    padding: 0.5rem;
    font-family: Arial, sans-serif;
  }
  .normal {
    word-break: normal;
  }
  .break-all {
    word-break: break-all;
  }
  .keep-all {
    word-break: keep-all;
  }
</style>
</head>
<body>
  <div class="box normal">
    normal: ThisIsAReallyLongWordThatMightOverflow
  </div>
  <div class="box break-all">
    break-all: ThisIsAReallyLongWordThatMightOverflow
  </div>
  <div class="box keep-all">
    keep-all: ThisIsAReallyLongWordThatMightOverflow
  </div>
</body>
</html>

Output

Three boxes each 200px wide with the text 'ThisIsAReallyLongWordThatMightOverflow'. The first box shows the word overflowing or breaking only at normal points, the second box breaks the word anywhere to fit inside, and the third box tries to keep the word unbroken, causing overflow.

⚠️

Common Pitfalls

Common mistakes when using word-break include:

Using break-all without understanding it breaks words anywhere, which can hurt readability.
Expecting keep-all to work for all languages; it mainly affects non-CJK text and may not prevent breaks in English.
Not combining word-break with other properties like overflow-wrap or white-space for better control.

css

/* Wrong: breaks words too aggressively */
.example {
  word-break: break-all;
}

/* Better: use overflow-wrap for softer breaks */
.example {
  overflow-wrap: break-word;
  word-break: normal;
}

📊

Quick Reference

Value	Description
normal	Break words only at allowed break points (default behavior).
break-all	Break words at any character to prevent overflow, may break words abruptly.
keep-all	Prevent word breaks for non-CJK text, mainly for Chinese, Japanese, Korean.
break-word (deprecated)	Legacy value similar to overflow-wrap: break-word; use overflow-wrap instead.

✅

Key Takeaways

Use word-break to control how words break at line ends in CSS.

break-all breaks words anywhere but can reduce readability.

keep-all is useful mainly for CJK languages to avoid word breaks.

Combine word-break with overflow-wrap for better text wrapping control.

Test your text in different languages and screen sizes to ensure good readability.