text-wrap-mode

Baseline 2024
Newly available

Since October 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The text-wrap-mode CSS property controls whether the text inside an element is wrapped. The different values provide alternate ways of wrapping the content of a block element. It can also be set, and reset, using the text-wrap shorthand or the white-space shorthand.

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

Note: The name of this property is a placeholder, pending the CSSWG finding a better name.

Try it

text-wrap-mode: wrap;

text-wrap-mode: nowrap;

<section class="default-example" id="default-example">
  <div class="whole-content-wrapper">
    <p>Edit the text in the box:</p>
    <div class="transition-all" id="example-element">
      <p contenteditable="">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut
        cum eum id quos est.
      </p>
    </div>
  </div>
</section>

.whole-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#example-element {
  border: 1px solid #c5c5c5;
  width: 250px;
}

Syntax

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

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

Values

This property specifies whether lines may wrap at unforced soft wrap opportunities. Possible values:

wrap

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.

nowrap

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

Formal definition

Initial value wrap
Applies to text and block containers
Inherited yes
Computed value as specified
Animation type discrete

Formal syntax

text-wrap-mode = 
  wrap    |
  nowrap

Examples

Wrapping content

The default setting is to wrap the content so the text-wrap-mode property is not necessary. In this example the content will flow over to the next line so that it fits in the box, the last line is longer that the containing box so overflows.

HTML

<div class="box">CSS IS AWESOME</div>

CSS

.box {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: wrap;
}

Result

Not wrapping content

In this example the content will not flow over to the next line so that it fits in the box as the content has been specifically told not to wrap with text-wrap-mode: nowrap;, the content is longer that the containing box so overflows.

HTML

<div class="box">CSS IS AWESOME</div>

CSS

.box {
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 64px;
  box-sizing: border-box;
  border: 4px solid black;
  padding: 0px 3px;
  width: 223px;
  text-wrap-mode: nowrap;
}

Result

Specifications

Specification
CSS Text Module Level 4
# text-wrap-mode

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
text-wrap-mode 130 130 124 115 17.4 130 124 86 17.4 No 130
nowrap 130 130 124 115 17.4 130 124 86 17.4 No 130
wrap 130 130 124 115 17.4 130 124 86 17.4 No 130

See also

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap-mode