CSS text-wrap-style 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-style property specifies the visual approach a user agent should take when breaking and flowing inline text at line endings or around non-rectangular interruptions (for example floats, shapes or other intrusions). Rather than being about a single mechanical rule, it expresses higher-level wrapping strategies - how aggressively to allow breaks, whether to favor even line lengths, how to handle hanging punctuation and intrusions into margin areas, and how tightly text should conform to surrounding shapes. In practice it governs the look and rhythm of multi-line text and is used to tune readability and aesthetics rather than to change document semantics.

Authors most often use text-wrap-style in layouts where text must interact with custom geometry or tight containers: narrow columns, magazine-style layouts, caption text wrapping around images, or responsive headings where balance and evenness matter. It is typically considered together with properties that determine the geometric constraints and breaking behavior, such as shape-outside to define the obstacle geometry, and with hyphenation and overflow controls like hyphens and overflow-wrap so the wrapping strategy can take into account whether words may be split or must be kept intact.

Because text-wrap-style operates at the level of line formation, it also interacts with how white space and line-break rules are applied: the effective wrapping depends on the whitespace handling model and line break rules in use, so consider it alongside white-space and line-break. Designers should weigh the visual benefits against layout stability and performance: more advanced wrapping strategies can require additional measuring and reflow work, especially during dynamic changes (resizing, font loading, or DOM updates). For accessibility and predictability, avoid relying on exotic wrapping behaviors for conveying meaning; when support is absent, user agents will fall back to their normal line-breaking algorithm, so ensure content remains readable and logically ordered under simpler wrapping.

Definition

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

Syntax

text-wrap-style: auto | balance | pretty | stable

Values

auto The default behavior. The browser uses its standard line-breaking algorithm, which usually prioritizes speed and filling the line as much as possible.
balance The browser attempts to make all lines in a block of text roughly the same length. This is best for short headings or pull quotes to avoid "orphans" (a single word on the last line).
pretty A more computationally "expensive" algorithm that prioritizes aesthetics over speed. It works to avoid typographic errors like widows and hyphenation clusters.
stableEnsures that if the content changes (e.g., during editing or dynamic loading), the line breaks don't jump around aggressively. It prioritizes layout stability.

Example

HTML

<div class="container">

  <h2>Default (Wrap)</h2>

  <p class="default">

    This is a short heading that usually ends up with a single word on the second line.

  </p>



  <h2>Balance</h2>

  <p class="balance">

    This is a short heading that usually ends up with a single word on the second line.

  </p>



  <h2>Pretty</h2>

  <p class="pretty">

    This is a longer paragraph designed to show how the "pretty" algorithm tries to avoid 

    leaving a single tiny word all by itself at the very end of the block.

  </p>

</div>

CSS

/* Layout styling */
.container {
  max-width: 500px; 
  font-family: sans-serif;
  line-height: 1.5;
}

h2 {
  font-size: 1.2rem;
  margin-top: 20px;
  color: #333;
}

/* The Property Examples */

.default {
  text-wrap: wrap;
  text-wrap-style: auto; /* Standard browser behavior */
}

.balance {
  text-wrap: wrap;
  text-wrap-style: balance; 
  /* Results in roughly equal line lengths */
}

.pretty {
  text-wrap: wrap;
  text-wrap-style: pretty; 
  /* Prevents single-word "orphans" on the last line */
}

Result

Editor

Browser Support

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