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 | ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する |