word-break
CSS
property sets whether line breaks appear wherever the text would otherwise overflow its content box.
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 https://github.com/mdn/interactive-examples and send us a pull request.
/* 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;
word-break
property is specified as a single keyword chosen from the list of values below.
normal
Use the default line break rule.
break-all
To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).
keep-all
normal
.
break-word
word-break: normal
and
overflow-wrap: anywhere
, regardless of the actual value of the
overflow-wrap
特性。
注意：
In contrast to
word-break: break-word
and
overflow-wrap: break-word
(见
overflow-wrap
),
word-break: break-all
will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).
| 初始值 |
normal
|
|---|---|
| 适用于 | 所有元素 |
| 继承 | yes |
| 计算值 | 如指定 |
| 动画类型 | discrete |
normal | break-all | keep-all | break-word
<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>
.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;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Text Module Level 3
The definition of 'word-break' in that specification. |
工作草案 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
word-break
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 15 |
IE
完整支持
5.5
注意事项
|
Opera 完整支持 15 | Safari 完整支持 3 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 15 | Opera Android 完整支持 14 | Safari iOS 完整支持 2 | Samsung Internet Android 完整支持 1.0 |
break-word
|
Chrome 完整支持 1 | Edge 完整支持 79 | Firefox 完整支持 67 | IE 不支持 No | Opera 完整支持 15 | Safari 完整支持 3 | WebView Android 完整支持 ≤37 | Chrome Android 完整支持 18 | Firefox Android 完整支持 67 | Opera Android 完整支持 14 | Safari iOS 完整支持 2 | Samsung Internet Android 完整支持 1.0 |
keep-all
|
Chrome 完整支持 44 | Edge 完整支持 12 | Firefox 完整支持 15 | IE 完整支持 5.5 | Opera 完整支持 31 | Safari 完整支持 9 | WebView Android 完整支持 44 | Chrome Android 完整支持 44 | Firefox Android 完整支持 15 | Opera Android 完整支持 32 | Safari iOS 完整支持 9 | Samsung Internet Android 完整支持 4.0 |
完整支持
不支持
见实现注意事项。
要求使用供应商前缀或不同名称。