試一試
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 |
瀏覽器相容性
載入中…