Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The text-wrap CSS property controls how text inside an element is wrapped. The different values provide:

  • Typographic improvements, for example more balanced line lengths across broken headings
  • A way to turn text wrapping off completely.

Note: The white-space-collapse and text-wrap properties can be declared together using the white-space shorthand property.



/* Keyword values */
text-wrap: wrap;
text-wrap: nowrap;
text-wrap: balance;

/* Global values */
text-wrap: inherit;
text-wrap: initial;
text-wrap: revert;
text-wrap: revert-layer;
text-wrap: unset;

The text-wrap property is specified as a single keyword chosen from the list of values below.



Text is wrapped across lines at appropriate characters (for example spaces, in languages like English that use space separators) to minimize overflow. This is the default value.


Text does not wrap across lines. It will overflow its containing element rather than breaking onto a new line.


Text is wrapped in a way that best balances the number of characters on each line, enhancing layout quality and legibility. Because counting characters and balancing them across multiple lines is computationally expensive, this value is only supported for blocks of text spanning a limited number of lines (the Chromium implementation uses six wrapped lines or less), meaning that it is useful for cases such as headings or pull quotes.

Formal definition

Initial valuewrap
Applies totext and block containers
Computed valueas specified
Animation typediscrete

Formal syntax

text-wrap = 
wrap |
nowrap |
balance |
stable |


Basic text wrap value comparison



<h2 class="wrap" contenteditable="true">
  The default behavior; the text in the heading wraps "normally"

<h2 class="nowrap" contenteditable="true">
  In this case the text in the heading doesn't wrap, and overflows the container

<h2 class="balance" contenteditable="true">
  In this case the text in the heading is nicely balanced across lines



.wrap {
  text-wrap: wrap;

.nowrap {
  text-wrap: nowrap;

.balance {
  text-wrap: balance;

h2 {
  font-size: 2rem;
  font-family: sans-serif;


The text in the example is editable. Change the text, adding long words, to view how the different line and word lengths impact wrapping.


CSS Text Module Level 4
# text-wrap

Browser compatibility

BCD tables only load in the browser

See also