word-break
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
CSS 属性 word-break
指定了怎样在单词内断行。
尝试一下
语法
css
/* 关键字值 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: auto-phrase; /* 实验性 */
word-break: break-word; /* 已弃用 */
/* 全局值 */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;
值
normal
-
使用默认的断行规则。
break-all
-
对于 non-CJK (CJK 指中文/日文/韩文) 文本,可在任意字符间断行。
keep-all
-
CJK 文本不断行。Non-CJK 文本表现同
normal
。 break-word
已弃用-
他的效果是
word-break: normal
和overflow-wrap: anywhere
的合,不论overflow-wrap
的值是多少。
备注:
与 word-break: break-word
和 overflow-wrap: break-word
(详见 overflow-wrap
)对比,word-break: break-word
将在文本可能溢出其容器的确切位置创建一个断点。
形式定义
形式语法
示例
HTML
html
<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>
CSS
css
.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;
}
规范
Specification |
---|
CSS Text Module Level 3 # word-break-property |
浏览器兼容性
BCD tables only load in the browser