CSS text-wrap-mode Property

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

Description

The text-wrap-mode property describes how inline text is permitted to break and wrap across lines, particularly when content contains long words, URLs, or sequences that would otherwise overflow their container. It governs the engine’s decisions about honoring soft wrap opportunities versus preventing breaks in certain sequences, which affects line composition, measure of lines, and how adjacent content flows around inline elements. Because it targets the break behavior rather than visual decoration, its effects are visible in layout, selection, caret movement, and text metrics.

This property does not act in isolation; it interacts with other line-breaking and wrapping controls. For example, it works together with overflow-wrap, which determines whether long words may be broken to avoid overflow; with white-space, which can enable or disable wrapping entirely; with hyphens, which controls hyphenation behavior when a break is inserted; and with line-break, which influences rules used for CJK (Chinese, Japanese, Korean) text. The combined effect of these properties determines whether and where lines are split, and whether breaks insert hyphens or split at punctuation, script boundaries, or within long tokens.

In practical terms, controlling text-wrap-mode is useful for UI scenarios where predictable wrapping is important: preventing awkward line breaks in headings and buttons, ensuring URLs remain intact or intentionally break to avoid horizontal scrolling, and managing how text wraps inside shaped or floated containers. It also matters for accessibility and text editing: different wrap behavior can change how screen readers announce text chunks, how keyboard navigation moves the caret, and how copy/paste preserves line breaks.

When applying this control, consider the content type and language: prose benefits from softer wrap rules that allow hyphenation and natural breaks, while code snippets, serial numbers, or identifiers usually need stricter no-break behavior. Because it influences fundamental line-breaking decisions, pairing text-wrap-mode with the appropriate surrounding properties (for example the ones linked above) produces the most consistent, readable, and layout-stable results.

Definition

Initial value: wrap
Applies to: text and block containers
Inherited: yes
Computed value: as specified
Animatable: yes
JavaScript syntax: object.style.textWrapmode

Syntax

text-wrap-mode: normal | none | wrap;

Values

normal Text wrapping occurs normally according to the width of the containing block.
none Text does not wrap. Lines extend horizontally and may overflow the container.
wrap(Default) Text is allowed to wrap onto multiple lines at appropriate break points to fit within its container.

Example

HTML

<div class='demo'>

  <h1>text-wrap-mode examples</h1>



  <div class='box default'>

    <h2>Default (fallback)</h2>

    <p>This paragraph uses the browser's default wrapping behavior. LooooooooooooooooooooooooooooooooooooooooooooooooongWordWithoutSpaces</p>

  </div>



  <div class='box balanced'>

    <h2>Balanced (text-wrap-mode: balance)</h2>

    <p>This paragraph attempts to balance lines when possible. LooooooooooooooooooooooooooooooooooooooooooooooooongWordWithoutSpaces</p>

  </div>



  <div class='box anywhere'>

    <h2>Break anywhere (text-wrap-mode: anywhere)</h2>

    <p>This paragraph allows breaks anywhere to avoid overflow. LooooooooooooooooooooooooooooooooooooooooooooooooongWordWithoutSpaces</p>

  </div>

</div>

CSS

/* Layout and base styles */
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f7fafc;
  color: #1a202c;
  padding: 32px;
}

.demo {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.box {
  width: 300px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

h1 {
  font-size: 18px;
  margin: 0 0 12px;
}

h2 {
  font-size: 14px;
  margin: 0 0 8px;
}

p {
  margin: 0;
  line-height: 1.5;
}

/* Examples using text-wrap-mode with fallbacks */
.default {
  /* default wrapping behavior (fallback) */
  overflow-wrap: normal;
  white-space: normal;
  text-wrap-mode: normal;
}

.balanced {
  /* attempt to balance lines when supported */
  text-wrap-mode: balance;
  -webkit-text-wrap: balance;
  /* fallback to allow breaking long words if needed */
  overflow-wrap: break-word;
}

.anywhere {
  /* allow breaks anywhere to avoid overflow */
  text-wrap-mode: anywhere;
  overflow-wrap: anywhere;
  word-break: break-word;
}

Result

Editor

Browser Support

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