line-breakプロパティの説明
CSSのline-breakプロパティは、句読点や記号などの禁則処理を指定します。これは主に日本語、中国語、韓国語など東洋の文字で機能します。
例えば、文章が画面の端や要素の終端に差し掛かった時に拗音促音長音（小さい「ゃ｜ゅ｜ょ｜っ」など）が行頭や文末にこないように制御できます。
line-breakに指定できる値
auto- 既定値に従います。
loose- 最も制限の少ない改行規則を適用します。
normal- 一般的な改行規則を適用します。
strict- 厳格な改行規則を適用します。
anywhere- 全ての文字の間で改行が行われます。
word-breakの制限を無視し、単語に対するハイフネーションも行いません。
line-breakの使い方とサンプルコード
line-breakプロパティの構文は以下の通りです。
/* キーワード値 */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;
/* グローバル値 */
line-break: inherit;
line-break: initial;
line-break: revert;
line-break: unset;
line-breakの実例
それでは実際にline-breakプロパティの書き方を見ていきましょう。言語情報lang="ja"を明示した要素の中に段落を複数配置し、個別の禁則処理を指定した場合の挙動を確かめます。
resizeに対応しているブラウザであれば、ボックスの横幅を伸縮できます。文字列が折り返される箇所の違いが現れる場所を探してみて下さい。
<section class="samp_box" lang="ja">
<div id="lb_auto">
<h2>auto</h2>
<p>禁則処理を確かめるために、チェック森々木々草々あぁいぃぞぉ！の箇所で折り返してみて下さい。</p>
</div>
<div id="lb_loos">
<h2>loose</h2>
<p>禁則処理を確かめるために、チェック森々木々草々あぁいぃぞぉ！の箇所で折り返してみて下さい。</p>
</div>
<div id="lb_norm">
<h2>normal</h2>
<p>禁則処理を確かめるために、チェック森々木々草々あぁいぃぞぉ！の箇所で折り返してみて下さい。</p>
</div>
<div id="lb_stri">
<h2>strict</h2>
<p>禁則処理を確かめるために、チェック森々木々草々あぁいぃぞぉ！の箇所で折り返してみて下さい。</p>
</div>
<div id="lb_anyw">
<h2>anywhere</h2>
<p>禁則処理を確かめるために、チェック森々木々草々あぁいぃぞぉ！の箇所で折り返してみて下さい。</p>
</div>
</section>
.samp_box {
overflow: auto;
padding: 1rem;
background: #eee;
display: grid;
grid: repeat(2, auto) / repeat(3, 1fr);
gap: 1rem;
resize: horizontal;
}
.samp_box > div {
padding: .3rem;
background: #fff;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box p {
margin: 1rem 0 0;
border: 1px solid #fff;
}
#lb_auto {
line-break: auto;
}
#lb_loos {
line-break: loose;
}
#lb_norm {
line-break: normal;
}
#lb_stri {
line-break: strict;
}
#lb_anyw {
line-break: anywhere;
}