CSS word-break Property – Rules for Breaking Words When Text Wraps

Definition and Usage

The word-break property specifies how words break when text reaches the end of a line.

This property plays a critical role in improving the readability of wrapped text.

Features

Some languages separate text into words, while others do not
The word-break property specifies the line-breaking rules for both word-separated and non-word-separated text when it reaches the end of a line.
In particular, line-breaking conventions differ between CJK (Chinese, Japanese, Korean) and non-CJK languages (e.g., English), and this property allows you to adjust those rules.

Basic Example

In the following example, we set the word-break property for English and Japanese text to see how line-breaking behavior differs between languages.

HTML

<p>
    There's a veryveryveryveryveryveryveryveryveryveryveryvery
    longlonglonglonglonglonglonglong-longlonglonglong sentence.
    <!-- English -->
</p>
<p>
    スーパーウルトラロング-テキスト-テスト-サンプル-テキスト-学校-チャイム-カンカンカン-みんな-集合-先生-待っています。
    <!-- Japanese -->
</p>
<p>
    학교종이 땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡 어서 모이자. 선생님이 우리를 기다리신다.
    <!-- Korean -->
</p>

CSS Live Demo: word-break Click the demo button below!

There's a veryveryveryveryveryveryveryveryveryveryveryvery longlonglonglonglonglonglonglong-longlonglonglong sentence.

スーパーウルトラロング-テキスト-テスト-サンプル-テキスト-学校-チャイム-カンカンカン-みんな-集合-先生-待っています。

학교종이 땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡 어서 모이자. 선생님이 우리를 기다리신다.

Values

Accepted values for the word-break property
`normal`	Initial value. Words break according to the usual conventions when text reaches the end of a line. These conventions differ depending on the language: In English, lines break at word boundaries. Line breaks do not occur in the middle of a word, although hyphens (`-`) can be used when needed. In Korean (Hangul), lines typically break at spaces between words, but if necessary, text can also break at the syllable level. For example, if a sentence is very long and there is no space at the end of the line, the browser may break the line at a Hangul syllable. In Japanese and Chinese, lines can break freely at any character or syllable, even when there are no spaces.
`break-all`	Lines break at the exact point where a word would otherwise overflow the end of a line.
`keep-all`	Lines do not break in the middle of words. That is, line breaks occur only at word boundaries (spaces between words). This value applies only to CJK (Chinese, Japanese, Korean) text; for other languages, it behaves the same as `normal`.
`break-word`	This value is deprecated. It was used in the past for backward compatibility and is still supported, but its use is not recommended. This value has the same effect as specifying `word-break: normal` together with `overflow-wrap: anywhere`.

Note:
When text reaches the end of a line, if a word contains a hyphen (-), the line will break at the hyphen regardless of the word-break property value. This follows a long-standing convention that CSS respects.

Formal syntax

Syntax

CSS

/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */

/* Global values */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;

Formal definition

Formal definition of the word-break property
Initial value	`normal`
Applies to	all elements
Inherited	yes
Animatable	no

Considerations for CJK (Chinese, Japanese, Korean) Text

The word-break property is crucial for improving the readability of CJK text. Its default value, normal, behaves differently depending on the language. Understanding these differences is important when handling Korean, Japanese, and Chinese text on websites.

CJK languages often break text at the character or syllable level rather than at spaces, unlike English. This affects readability, especially in content-focused contexts like news articles, manuals, technical documents, and community posts.

Using `word-break: keep-all` for Korean

For Korean text, it is often preferable to set:

The keep-all value prevents line breaks within words, allowing breaks only at natural word boundaries (spaces). This ensures that syllable-based Korean text remains readable and avoids awkward mid-word breaks.

Example HTML & CSS

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Word-break for Korean Text</title>
</head>
<body>
    <h1>Word-break for Korean Text</h1>
    <p>
        For better readability of Korean text,<br>
        it is recommended to set <code>word-break: keep-all;</code>
    </p>
</body>
</html>

Here, the :lang(ko) pseudo-class targets elements with the lang="ko" attribute, applying keep-all only to Korean text. Japanese and Chinese text do not require this setting, as their line-breaking behavior is already handled at the character level.

Caveats when using `keep-all`

While word-break: keep-all improves readability for Korean text, it can cause layout issues in certain cases:

URLs or long strings in narrow containers may overflow.
Long words in table cells or other tight spaces can create unexpected wrapping issues.

To handle these situations, you can selectively override word-break for overflowing content:

This approach maintains readability for normal text while preventing layout breaks for long, unbreakable content.

By following these guidelines, developers can balance readability, user experience, and layout integrity when working with CJK text.

Browser compatibility

Browser compatibility for the `word-break` property
Property	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`word-break`	1	12	15	3

rowser Compatibility for the `word-break` Property: `keep-all` Value
Value	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`keep-all`	44	12	15	9

rowser Compatibility for the `word-break` Property: `break-word` Value
Value	Desktop Chrome	DesktopDesktop Edge	Desktop Firefox	Safari
`break-word`	1	79	67	3

See more details on caniuse.com.

Specifications

Specification for the word-break property
Specification
`word-break`	CSS Text Module Level 3 #word-break-property

References

MDN - word-break