-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
140 lines (96 loc) · 5.11 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
---
title: text-wrap
slug: Web/CSS/text-wrap
page-type: css-shorthand-property
browser-compat: css.properties.text-wrap
---
{{CSSRef}}
The **`text-wrap`** CSS shorthand 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 {{CSSxRef("white-space-collapse")}} and `text-wrap` properties can be declared together using the {{CSSxRef("white-space")}} shorthand property.
{{EmbedInteractiveExample("pages/css/text-wrap.html")}}
## Constituent properties
This property is a shorthand for the following CSS properties:
- [`text-wrap-mode`](/en-US/docs/Web/CSS/text-wrap-mode)
- [`text-wrap-style`](/en-US/docs/Web/CSS/text-wrap-style)
## Syntax
```css
/* Keyword values */
text-wrap: wrap;
text-wrap: nowrap;
text-wrap: balance;
text-wrap: pretty;
text-wrap: stable;
/* 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.
### 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.
- `balance`
- : 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 (six or less for Chromium and ten or less for Firefox).
- `pretty`
- : Results in the same behavior as `wrap`, except that the user agent will use a slower algorithm that favors better layout over speed. This is intended for body copy where good typography is favored over performance (for example, when the number of [orphans](/en-US/docs/Web/CSS/orphans) should be kept to a minimum).
- `stable`
- : Results in the same behavior as `wrap`, except that when the user is editing the content, the lines that come before the lines they are editing remain static rather than the whole block of text re-wrapping.
## Description
There are 2 ways that text can flow across lines within a block of content, such as a paragraph ({{HTMLElement("p")}}) or headings ({{HTMLElement("heading_elements","<h1>–<h6>")}}). These are _forced line breaks_, that are controlled by the user, and _soft line breaks_, that are controlled by the browser. The `text-wrap` property can be used to prompt the browser how to control the _soft line breaks_.
The value you choose, for `text-wrap`, depends on how many lines of text you anticipate styling, whether the text is `contenteditable`, and whether you need to prioritize appearance or performance.
When the styled content will be limited to a short number of lines, such as headings, captions, and blockquotes, `text-wrap: balance` can be added to balance the number of characters on each line, enhancing layout quality and legibility. As browsers limit the number of lines impacted by this property, this value's impact on performance is negligible.
For longer sections of text, `text-wrap: pretty` can be used. Note that `pretty` has a negative effect on performance, so it should be only used for longer blocks of text when the layout is more important than speed.
The `stable` value improves user experience when used on content that is [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable). This value ensures that, as the user is editing text, the previous lines in the area being edited remain stable.
## Formal definition
{{CSSInfo}}
## Formal syntax
{{CSSSyntax}}
## Examples
### Basic text wrap value comparison
#### HTML
```html
<h2 class="wrap" contenteditable="true">
The default behavior; the text in the heading wraps "normally"
</h2>
<h2 class="nowrap" contenteditable="true">
In this case the text in the heading doesn't wrap, and overflows the container
</h2>
<h2 class="balance" contenteditable="true">
In this case the text in the heading is nicely balanced across lines
</h2>
```
### CSS
```css
.wrap {
text-wrap: wrap;
}
.nowrap {
text-wrap: nowrap;
}
.balance {
text-wrap: balance;
}
h2 {
font-size: 2rem;
font-family: sans-serif;
}
```
#### Result
The text in the example is editable. Change the text, adding long words, to view how the different line and word lengths impact wrapping.
{{EmbedLiveSample("Examples", "100%", 350)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{CSSxRef("white-space")}}
- {{CSSxRef("white-space-collapse")}}
- [CSS text module](/en-US/docs/Web/CSS/CSS_text)
- [CSS `text-wrap: balance`](https://developer.chrome.com/blog/css-text-wrap-balance/) on developer.chrome.com
- [CSS `text-wrap: pretty`](https://developer.chrome.com/blog/css-text-wrap-pretty/) on developer.chrome.com