text-wrap-mode
Baseline 2024Newly available
Since October 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Thetext-wrap-modeCSS 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 thetext-wrap shorthand or thewhite-space shorthand.
Note:Thewhite-space-collapse andtext-wrap-mode properties can be declared together using thewhite-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> <div> <p>Edit the text in the box:</p> <div> <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:
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 thetext-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>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 willnot flow over to the next line so that it fits in the box as the content has been specifically told not to wrap withtext-wrap-mode: nowrap;, the content is longer that the containing box so overflows.
HTML
<div>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 |