CSS word-break Property

What You’ll Learn

The word-break property controls how words split at line edges — essential when long URLs, code, or unbroken strings would otherwise overflow.

Introduction

The word-break property in CSS is used to specify how words should break or split when reaching the end of a line. This property is particularly useful for controlling the behavior of text in situations where long words or URLs might disrupt the layout of your content.

By using the word-break property, you can ensure a more visually appealing and readable presentation of text on your website.

Definition and Usage

Apply word-break on containers with constrained width — cards, tables, chat bubbles, code blocks, and mobile layouts. It works alongside overflow-wrap and white-space to manage how text flows.

📝 Syntax

The syntax for the word-break property is straightforward. It can be applied to any block or inline-level element.

element {
  word-break: normal | break-all | keep-all | break-word;
}

Basic Example

.url {
  word-break: break-all;
}

Syntax Rules

• One keyword value at a time.
• break-all is aggressive — best for URLs, hashes, and code tokens.
• keep-all is mainly for CJK languages.
• break-word is legacy; modern code often uses overflow-wrap: break-word instead.
• The property is inherited.

Related Properties

• overflow-wrap (& word-wrap) — allows breaking long unbroken strings
• white-space — controls space collapsing and line wrapping
• hyphens — adds hyphenation at break points when supported
• text-overflow — ellipsis when text is clipped instead of wrapped

🎯 Default Value

The default value of the word-break property is normal, which uses the default line break rules for the content language.

💎 Property Values

The word-break property accepts keyword values that control line breaking inside words.

When to Use word-break

word-break is helpful whenever unbroken strings meet narrow containers:

• Long URLs in cards — Prevent horizontal scrolling on mobile.
• Code snippets and tokens — Wrap JWT strings, hashes, and file paths.
• Chat and comment UI — Handle user-pasted strings gracefully.
• CJK typography — Use keep-all to respect word boundaries in Asian languages.
• Data tables — Keep cells readable without breaking the table layout.

Examples Gallery

In this example, we’ll demonstrate the different values of the word-break property.

<style>
  .normal { word-break: normal; }
  .break-all { word-break: break-all; }
  .keep-all { word-break: keep-all; }
  .break-word { word-break: break-word; }
</style>

<div class="break-all">Longunbrokenstring</div>

.url {
  word-break: break-all;
}

.cjk {
  word-break: keep-all;
}

pre {
  word-break: break-all;
  font-family: monospace;
}

♿ Accessibility

• Readability first — Avoid break-all on body paragraphs where mid-word splits confuse readers.
• Zoom and mobile — Proper wrapping prevents horizontal scrolling, which helps users with low vision and motor difficulties.
• Screen readers — Visual breaks do not change spoken text, but confusing layout can still hinder comprehension for some users.
• Prefer overflow-wrap when possible — It breaks less aggressively than break-all for general content.

word-break + overflow-wrap

Modern layouts often combine both properties: overflow-wrap: break-word for soft wrapping, and word-break: break-all only where aggressive breaks are acceptable.

.content {
  overflow-wrap: break-word;
  word-break: normal;
}

.url {
  word-break: break-all;
}

💡 Best Practices