CSS word-break Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The word-break property controls how line breaks are handled within words or continuous strings of characters when a line wrap occurs. It influences whether the browser is allowed to break a word at arbitrary points, whether breaks prefer language-appropriate word boundaries, and how the layout handles extremely long strings such as URLs, hashes, or concatenated identifiers that would otherwise overflow their container. Because it operates at the level of breaking opportunities inside words and unspaced runs, it directly affects text flow, readability, and whether content spills out of boxes.

In practice, this property interacts with the natural rules of different writing systems: languages that use explicit spaces between words behave differently from scripts (like Chinese, Japanese, or Thai) that traditionally allow breaks between characters. It also works alongside soft break opportunities (for example, zero-width spaces and soft hyphens) and the browser’s line-breaking algorithm to decide where a line may be split. For content containing long technical tokens, identifiers, or long words, the property can be used to avoid horizontal scrolling by permitting breaks at nonstandard points, but that can come at the cost of visual continuity or perceived readability.

Because line breaking is one part of a larger text-wrapping ecosystem, you’ll often consider overflow-wrap (how overflowing words should be handled), white-space (how whitespace and wrapping are treated overall), hyphens (automatic hyphenation behavior), and line-break (rules for East Asian text) when deciding on a solution. Use of word-break is a trade-off: it can prevent layout breakage and improve responsiveness of fluid designs, but excessive permissiveness can degrade typography and make text harder to scan.

Definition

Initial value: normal
Applies to: All elements
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.wordBreak

Interactive Demo

word-break: normal;

word-break: break-all;

word-break: keep-all;

The rusty swing set creaked a lonely lullaby in the twilight, lets add a very long word here - Pneumonoultramicroscopicsilicovolcanoconiosis, shadows lengthening like grasping fingers across the dew-kissed grass.

Syntax

word-break: normal | keep-all | break-all

Values

normalWords break according to their usual rules.
keep-allImplicit soft wrap opportunities between letters are suppressed, i.e. breaks are prohibited between pairs of letters (except where opportunities exist due to dictionary-based breaking). Otherwise this option is equivalent to normal. In this style, sequences of CJK characters do not break.
break-allIn addition to normal soft wrap opportunities, lines may break between any two letters (except where forbidden by the line-break property). Hyphenation is not applied. This option is used mostly in a context where the text is predominantly using CJK characters with few non-CJK excerpts and it is desired that the text be better distributed on each line.

Example

HTML

<div class="examples">

  <div class="box normal">

    <h3>word-break: normal</h3>

    <p>This is a normal paragraph. It will break only at allowed break points between words.</p>

    <p class="long">ThisIsAReallyLongWordWithoutAnyHyphensOrSpacesThatWouldNormallyOverflowTheContainer.</p>

  </div>

  <div class="box break-all">

    <h3>word-break: break-all</h3>

    <p>This setting allows words to break anywhere if necessary to prevent overflow.</p>

    <p class="long">ThisIsAReallyLongWordWithoutAnyHyphensOrSpacesThatWouldNormallyOverflowTheContainer.</p>

  </div>

  <div class="box keep-all">

    <h3>word-break: keep-all</h3>

    <p>Keep-all prevents word breaks for CJK text. For non-CJK text it behaves like normal.</p>

    <p class="long">ThisIsAReallyLongWordWithoutAnyHyphensOrSpacesThatWouldNormallyOverflowTheContainer.</p>

  </div>

  <div class="box break-word">

    <h3>word-break: break-word</h3>

    <p>break-word is legacy; used with overflow-wrap to force breaks and avoid overflow.</p>

    <p class="long">ThisIsAReallyLongWordWithoutAnyHyphensOrSpacesThatWouldNormallyOverflowTheContainer.</p>

  </div>

</div>

CSS

.examples {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: Arial, Helvetica, sans-serif;
}

.box {
  width: 260px;
  border: 1px solid #ccc;
  padding: 12px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.box h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
}

.box p {
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.box p.long {
  background: #f8f9fa;
  padding: 6px;
  border-radius: 4px;
}

.box.normal p.long {
  word-break: normal;
  overflow-wrap: normal;
}

.box.break-all p.long {
  word-break: break-all;
}

.box.keep-all p.long {
  word-break: keep-all;
}

.box.break-word p.long {
  word-break: break-word;
  overflow-wrap: anywhere;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS word-break property. Hover over a browser icon to see the version that first introduced support for this CSS property.