CSS word-wrap 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-wrap property controls whether the browser is allowed to break and wrap long, unbroken strings of characters (for example long words, URLs, or continuous sequences of alphanumeric characters) onto the next line to prevent them from overflowing their containing box. When enabled, it instructs the line-breaking process to insert break points inside otherwise unbreakable segments so that the content stays within the layout boundaries rather than causing horizontal scrolling or pushing out a container’s width. This behavior is applied within the inline formatting context of a block-level box and affects how text flows when available line width is constrained.

This property is closely related to several line-breaking and overflow controls in CSS. In modern specifications it corresponds to the standardized overflow-wrap, and its effects interact with how explicit word-boundary rules are applied by word-break. Whether the browser will actually create breaks also depends on whitespace handling as governed by white-space, while automatic hyphen insertion (which can make wrapped breaks more readable) is controlled by hyphens. Finally, the visual outcome when content would otherwise exceed a container is also affected by the element’s overflow handling, e.g. overflow.

In practice, developers use word-wrap to prevent layout breakage from unexpectedly long tokens - common examples are raw URLs, long identifiers, or inline code samples that have no natural spaces. Its use improves robustness in responsive designs and narrow viewports by ensuring content remains within its box. However, forcing breaks within words can reduce readability or create awkward visual results, so it’s often paired with hyphenation, careful typography choices, or alternative formatting (wrapping long tokens in scrollable containers) depending on the content and audience. It’s also important to test with the languages and scripts you support, since behavior and acceptable break points differ (for example between Latin-based text and CJK text), and to consider accessibility and meaning: breaking certain tokens can change how content is perceived even if it doesn’t change the underlying semantics.

Definition

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

Interactive Demo

word-wrap: normal;

word-wrap: break-word;

This is the first time I've seen the word Pneumonoultramicroscopicsilicovolcanoconiosis. It's a long one.

Syntax

word-wrap: normal | break-word

Values

normalLines can only be broken at normal break points (spaces, non-alphanumeric characters, etc.).
break-wordWords that exceed the width of the container will be arbitrarily broken to fit within the containers bounds.
inherit

Example

HTML

<div class="container">

  <h3>Without word-wrap</h3>

  <p class="no-wrap">

    ThisIsAnExtremelyLongWordThatWillNormallyOverflowTheContainerBoundaries.

  </p>



  <h3>With word-wrap</h3>

  <p class="enable-wrap">

    ThisIsAnExtremelyLongWordThatWillNormallyOverflowTheContainerBoundaries.

  </p>

</div>

CSS

/* Container to make the overflow visible */
.container {
  width: 200px;
  border: 2px solid #333;
  padding: 10px;
  font-family: sans-serif;
}

/* The default behavior: text pokes out of the border */
.no-wrap {
  word-wrap: normal; 
  background-color: #ffcccc;
}

/* The fix: text is forced to break onto a new line */
.enable-wrap {
  word-wrap: break-word; /* Traditional property */
  overflow-wrap: break-word; /* Modern standard */
  background-color: #ccffcc;
}

Result

Editor

Browser Support

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