word-break:要素の幅を超過するテキストの自動改行について指定する
初期値 | normal |
適用対象 | 全ての要素 |
継承 | する |
アニメーション | 離散値 |
対応ブラウザ | caniuseで確認 |
word-breakプロパティの説明
word-break
は、要素の幅を超過するテキストの自動改行について指定します。例えば、半角スペースを含まない長い単語がボックスに収まりきらない場合に、コンテンツ・エリアを貫通してそのまま表示させるか、自動的に改行を挿入してコンテンツ・エリアに収めるかを指定できます。
このプロパティは、文章がひとつながりになる日本語でも有効です。折り返しを制御する他のプロパティは、単語ごとに空白文字で区切られる英文を基準に仕様が定められているため、日本語ではうまく機能しないことがあります。テキストの折り返しや自動改行に関しては、以下のプロパティと組み合わせて制御して下さい。
word-breakに指定できる値
- normal
- ブラウザの改行規則に従います。これが初期値です。
- break-all
- 単語の途中などの改行に関する禁則処理を解除し、全ての場所で自動的な折り返しを行います。
- keep-all
- 日本語、中国語、台湾語、韓国語などの折り返しを禁止します。それ以外の言語では、
normal
と同じ挙動となります。 - break-word(非推奨)
normal
の改行規則を尊重しますが、単語の途中でも折り返しを行います。実際の指定に関わらず、overflow-wrap
の値がanywhere
の時と同じ効果になります。
word-breakの使い方とサンプル
word-break
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* 非推奨 */
/* グローバル値 */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;
word-breakの実例
それでは実際にword-break
プロパティの書き方を見ていきましょう。以下の例は、幅を固定したボックスに、超過する長さのテキストを配置した時の比較です。
word-break
の値に応じて、自動の折り返しが発生するかしないかの挙動が変わります。ボックスからはみ出すコンテンツの表示に関してはoverflow
で制御します。
表示確認
CSS
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background-color: #fff;
}
section > h1 {
margin: 1rem 0 0;
font-size: 1rem;
}
section > p {
width: 200px;
margin: 1rem 0 0;
border: 1px solid #999;
}
#item_1 > p {
word-break: normal;
}
#item_2 > p {
word-break: break-all;
}
#item_3 > p {
word-break: keep-all;
}
#item_4 > p {
word-break: break-word;
}
HTML
<div class="samp_box">
<section id="item_1">
<h1>word-break: normal;</h1>
<p>KonobunshouhaTekitoudesu. 日本語の自動折り返しのテストです。</p>
</section>
<section id="item_2">
<h1>word-break: break-all;</h1>
<p>KonobunshouhaTekitoudesu. 日本語の自動折り返しのテストです。</p>
</section>
<section id="item_3">
<h1>word-break: keep-all;</h1>
<p>KonobunshouhaTekitoudesu. 日本語の自動折り返しのテストです。</p>
</section>
<section id="item_4">
<h1>word-break: break-word;</h1>
<p>KonobunshouhaTekitoudesu. 日本語の自動折り返しのテストです。</p>
</section>
</div>
word-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 | ブロックが区切られた場合に次の行の先頭に表示される内容の最小行数を設定する |