blob: 07e862e86aa9cb80705794f9410272c4f4373ece (
plain)
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
|
---
title: word-break
slug: Web/CSS/word-break
tags:
- CSS
- CSS 属性
translation_of: Web/CSS/word-break
---
<div>{{CSSRef}}<br>
</div>
<p> CSS 属性 <code>word-break</code> 指定了怎样在单词内断行。</p>
<div>{{EmbedInteractiveExample("pages/css/word-break.html")}}</div>
<h2 id="语法">语法</h2>
<pre class="notranslate">/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */
/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;</pre>
<h3 id="值">值</h3>
<dl>
<dt><code>normal</code></dt>
<dd>使用默认的断行规则。</dd>
<dt><code>break-all</code></dt>
<dd>对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行。</dd>
<dt><code>keep-all</code></dt>
<dd>CJK 文本不断行。 Non-CJK 文本表现同 <code>normal</code>。</dd>
<dt><code>break-word</code> {{Deprecated_Inline}}</dt>
<dd>他的效果是<code>word-break: normal</code> 和 <code>overflow-wrap: anywhere</code> 的合，不论 {{cssxref("overflow-wrap")}}的值是多少。</dd>
</dl>
<div class="blockIndicator note">
<p>注意：与 <code>word-break: break-word</code> 和 <code>overflow-wrap: break-word</code>（详见 {{cssxref("overflow-wrap")}}）对比，<code>word-break: break-word</code> 将在文本可能溢出其容器的确切位置创建一个断点。</p>
</div>
<h2 id="规范">规范</h2>
<p>{{CSSInfo}}</p>
<h2 id="正式语法">正式语法</h2>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>
<p>4. <code>word-break: break-word</code></p>
<p class="breakWord narrow">This is a long and
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="notranslate">.narrow {
padding: 10px;
border: 1px solid;
width: 500px;
margin: 0 auto;
font-size: 20px;
line-height: 1.5;
letter-spacing: 1px;
}
.normal {
word-break: normal;
}
.breakAll {
word-break: break-all;
}
.keepAll {
word-break: keep-all;
}
.breakWord {
word-break: break-word;
}</pre>
<p>{{EmbedLiveSample('Examples', '100%', 600)}}</p>
<h2 id="规范_2">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Text', '#word-break-property', 'word-break')}}</td>
<td>{{Spec2('CSS3 Text')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.word-break")}}</p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li>{{cssxref("overflow-wrap")}}</li>
</ul>
|
