| 属性名 | line-break |
|---|---|
| 値 | auto | loose | normal | strict | anywhere |
| 初期値 | auto |
| 適用可能要素 | すべての要素 |
| 継承 | 継承する |
| サポート | https://caniuse.com/?search=line-break |
日本語、韓国語、中国語などの自動改行時の禁則処理を指定します。対象要素には lang="ja" を設定します。
| 値 | 説明 |
|---|---|
| anywhere | すべての文字を禁則処理しません。 |
| loose | 最低限の禁則処理を行います。「。」や「、」など。 |
| normal | 最低限に加えて通常の禁則処理を行います。「々」など。 |
| strict | 通常に加えて厳密な禁則処理を行います。「っ」や「ゃ」など。 |
| auto | 自動的に禁則処理を決定します。行の長さによって禁則条件が変動することもあります。 |
使用例を示します。赤枠の横幅を変更して「。」「っ」「々」が禁則処理されるか試してみてください。
.sample-box {
width: 20rem;
border: 1px solid #900;
overflow: auto;
resize: horizontal;
padding: 1rem;
}
.box {
height: 4rem;
border: 1px solid gray;
padding: .2rem;
}
.sample-anywhere {
line-break: anywhere;
}
.sample-loose {
line-break: loose;
}
.sample-normal {
line-break: normal;
}
.sample-auto {
line-break: auto;
}
.sample-strict {
line-break: strict;
}
<div class="sample-box" lang="ja"> <h5>anywhere</h5> <div class="box sample-anywhere">日本語がどこで改行されるか。昔々のあっぱれ物語。</div> <h5>loose</h5> <div class="box sample-loose">日本語がどこで改行されるか。昔々のあっぱれ物語。</div> <h5>normal</h5> <div class="box sample-normal">日本語がどこで改行されるか。昔々のあっぱれ物語。</div> <h5>auto</h5> <div class="box sample-auto">日本語がどこで改行されるか。昔々のあっぱれ物語。</div> <h5>strict</h5> <div class="box sample-strict">日本語がどこで改行されるか。昔々のあっぱれ物語。</div> </div>