text-wrap-mode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used 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.

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

Try it

Syntax

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

/* Global values */
text-wrap-style: inherit;
text-wrap-style: initial;
text-wrap-style: revert;
text-wrap-style: revert-layer;
text-wrap-style: 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

Note: Check the browser support for this property.

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 No No 124 No 17.4 No 124 No 17.4 No No
nowrap No No 124 No 17.4 No 124 No 17.4 No No
wrap No No 124 No 17.4 No 124 No 17.4 No No

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