text-wrap-mode CSS property
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 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-wrap-mode
|
|
|
|
|
|
|
|
|
|
|
|
|
nowrap
|
|
|
|
|
|
|
|
|
|
|
|
|
wrap
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support