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
141
142
143
144
145
146
147
|
---
title: overflow-wrap
slug: Web/CSS/word-wrap
tags:
- CSS Text Module Level 3
- CSS3
- W3C
- overflow-wrap
- word-wrap
translation_of: Web/CSS/overflow-wrap
---
<div>{{CSSRef}}</div>
<div></div>
<p>{{EmbedInteractiveExample("pages/css/overflow-wrap.html")}}</p>
<div class="hidden">
<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
</div>
<p><a href="/en/CSS" title="CSS">CSS</a> 属性 <code><strong>overflow</strong></code><strong><code>-wrap</code></strong> 是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。</p>
<div class="blockIndicator note">
<p>与{{cssxref("word-break")}}相比，<code>overflow-wrap</code>仅在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断。</p>
</div>
<div class="note"><strong>注：</strong><strong style="color: rgba(0, 0, 0, 0.65098); font-style: italic;">word-wrap 属性原本属于微软的一个私有属性，在 CSS3 现在的文本规范草案中已经被重名为 {{cssxref("overflow-wrap")}} 。 word-wrap 现在被当作 overflow-wrap 的 “别名”。 稳定的谷歌 Chrome 和 Opera 浏览器版本支持这种新语法。</strong></div>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre class="notranslate"><code>/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;</code>
</pre>
<p>将 <code>overflow-wrap</code> 属性指定为从下面的值列表中选择的单个关键字。</p>
<h3 id="Values" name="Values">值</h3>
<dl>
<dt><code>normal</code></dt>
<dd>行只能在正常的单词断点处中断。（例如两个单词之间的空格）。</dd>
<dt><code>break-word</code></dt>
<dd>表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。</dd>
</dl>
<h2 id="形式语法">形式语法</h2>
<pre class="notranslate">{{csssyntax}}</pre>
<h2 id="Examples" name="Examples">示例</h2>
<h3 id="比较_overflow-wrap、word-break_和_hyphens">比较 overflow-wrap、word-break 和 hyphens</h3>
<p>本示例比较分解长单词时，<code>overflow-wrap</code>, <code>word-break</code>, <code>hyphens</code> 的结果。</p>
<h4 id="HTML">HTML</h4>
<pre class="notranslate"><p>They say the fishing is excellent at
Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>normal</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>word-break</code>)</p>
<p>They say the fishing is excellent at
Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
<p lang="en">They say the fishing is excellent at
Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>hyphens</code>, English rules)</p>
<p class="hyphens" lang="de">They say the fishing is excellent at
Lake <em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
though I've never been there myself. (<code>hyphens</code>, German rules)</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="notranslate">p {
width: 13em;
margin: 2px;
background: gold;
}
.ow-anywhere {
overflow-wrap: anywhere;
}
.ow-break-word {
overflow-wrap: break-word;
}
.word-break {
word-break: break-all;
}
.hyphens {
hyphens: auto;
}</pre>
<h4 id="结果">结果</h4>
<p>{{ EmbedLiveSample('Comparing_overflow-wrap_word-break_and_hyphens', '100%', 260) }}</p>
<h2 id="Specifications" name="Specifications">规范</h2>
<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}</td>
<td>{{ Spec2('CSS3 Text') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>{{Compat("css.properties.overflow-wrap")}}</p>
<h2 id="See_also" name="See_also">另参见</h2>
<ul>
<li>{{cssxref("word-break")}}</li>
<li>{{cssxref("hyphens")}}</li>
<li>{{cssxref("text-overflow")}}</li>
</ul>
|
