line-break:句読点や記号などの禁則処理を指定する

初期値 auto
適用対象 全ての要素
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

line-breakプロパティの説明

line-breakは、句読点や記号などの禁則処理を指定します。これは主に日本語、中国語、韓国語など東洋の文字で機能します。

例えば、文章が画面の端や要素の終端に差し掛かった時に拗音促音長音(小さい「ゃ|ゅ|ょ|っ」など)が行頭や文末にこないように制御できます。

line-breakに指定できる値

auto
既定値に従います。
loose
最も制限の少ない改行規則を適用します。
normal
一般的な改行規則を適用します。
strict
厳格な改行規則を適用します。
anywhere
全ての文字の間で改行が行われます。word-breakの制限を無視し、単語に対するハイフネーションも行いません。

line-breakの使い方とサンプル

line-breakプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
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に対応しているブラウザであれば、ボックスの横幅を伸縮できます。文字列が折り返される箇所の違いが現れる場所を探してみて下さい。

表示確認
CSS
.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;
}
HTML
<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>

line-breakに関連するCSSプロパティ

文字揃え・段落の振る舞い
direction 文字表記の方向(左右)を指定する
hanging-punctuation 句読点、括弧、引用符などの禁則処理を指定する
letter-spacing 文字同士の間隔を指定する
line-break 句読点や記号などの禁則処理を指定する
line-height 行の高さを指定する
tab-size タブ(tab)文字の表示幅を指定する
unicode-bidi Unicodeのアルゴリズムを上書きして文字表記の方向を変更する
white-space 要素内のホワイトスペースの扱い方を指定する
word-break 要素の幅を超過するテキストの自動改行について指定する
word-spacing 単語同士の間隔を指定する
word-wrap インライン要素に対して単語の途中で改行処理を行うかどうかを指定する
writing-mode テキストの書字方向やブロックのフローを指定する
widows ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する