试一试
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</div>
</section>
#example-element {
width: 80%;
padding: 20px;
text-align: start;
border: solid 1px darkgray;
}
语法
css
/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: auto-phrase; /* experimental */
word-break: break-word; /* deprecated */
/* Global values */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;
word-break 属性被指定为从下面的值列表中选择的单个关键字。
值
normal-
使用默认的断行规则。
break-all-
为了防止溢出，应在任意两个字符之间插入断词（不包括中文/日文/韩文文本）。
keep-all-
不应为中文/日文/韩文（CJK）文本使用断词。非 CJK 文本的行为与
normal相同。 auto-phrase-
与
word-break: normal具有相同的效果，不同之处在于会执行语言特定分析以改进断词，避免在自然短语中间断词。 break-word-
与
overflow-wrap: anywhere结合word-break: normal具有相同的效果，无论overflow-wrap属性的实际值如何。
注意：与 word-break: break-word 和 overflow-wrap: break-word（参见 overflow-wrap）相反，word-break: break-all 将在文本会溢出其容器的确切位置创建断行（即使将整个单词放在单独的行上可以消除断行的需要）。
规范还列出了一个附加值 manual，目前任何浏览器都不支持。当实现时，manual 将与 word-break: normal 具有相同的效果，不同之处在于东南亚语言不会自动插入断行。这是因为在这些语言中，用户代理经常在次优位置放置断行。manual 将允许您手动在最佳位置插入断行。
正式定义
正式语法
word-break =
normal |
break-all |
keep-all |
manual |
auto-phrase |
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: manual</code></p>
<p class="manual narrow">
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
<p>5. <code>word-break: auto-phrase</code></p>
<p class="autoPhrase narrow">
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
</p>
<p>6. <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;
}
.manual {
word-break: manual;
}
.autoPhrase {
word-break: auto-phrase;
}
.breakWord {
word-break: break-word;
}
规范
| 规范 |
|---|
| CSS Text Module Level 3 # word-break-property |
浏览器兼容性
加载中…