長い英単語の文章などは改行されずにボックスをはみ出してしまうことがあります。
テキストがページの横幅を大きくはみ出してしまうとスマホでは横スクロールが発生するので、縦スクロールをしたつもりが横スクロールになることもあってストレスを感じてしまいます。
※このページはスマホで見た場合に敢えて横スクロールが発生するようにしてあります。
ユーザーに快適にサイトを閲覧してもらうためには無駄な横スクロールは発生しないようにすべきです。
CSSのword-wrap（overflow-wrap）あるいはword-breakプロパティを使ってテキストがはみ出さないように調整しましょう。
この記事ではそれら各CSSプロパティの使い方をサンプルを交えて解説します。
CSSでテキストの折り返しを設定する前後を比較
まずはテキストがはみ出した状態を確認してみましょう。
確認用コードは以下の通り。
HTMLコードは後の説明でも同じものを使います。
|
1 2 3 |
<div class="sample-01"> 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890 </div> |
|
1 2 3 4 5 6 |
.sample-01 { width: 300px; padding: 5px; background: #f4f4f4; border: 1px solid #ccc; } |
グレーで示した横幅300pxのdivタグのボックス内にテキストが収まって欲しいのですがはみ出してしまっています。
これを解決するには文字を囲むタグのCSSに1行だけプロパティを追加してやることで綺麗にボックス内に収まるようになります。
|
1 2 3 4 5 6 7 |
.sample-01 { width: 300px; padding: 5px; background: #F4F4F4; border: 1px solid #ccc; word-wrap: break-word; } |
上記ではword-wrapを使っていますが、似たようなプロパティにword-breakもあります。
次からはこれらがどう違うのかについて解説していきます。
word-wrapでテキストの折り返しを設定する
word-wrap（overflow-wrap）プロパティは、単語の途中で改行しないと文字列が長すぎて包含ボックス内に収まらない時に、はみ出さないように改行を行うかどうかを決めます。
| normal | 通常の単語の分割位置でのみ改行する。 |
|---|---|
| break-word | 行内に改行可能な箇所がないときに、通常分割できない単語を任意の箇所で分割して改行する。 |
それでは実際の動作を確認してみましょう。
|
1 2 3 4 5 6 7 |
.sample-01 { width: 300px; padding: 5px; background: #f4f4f4; border: 1px solid #ccc; word-wrap: [ここに値を入力]; } |
word-wrap: normalだと英語がボックスをはみ出してしまいますが、word-wrap: break-wordだと綺麗に収まります。
word-breakでテキストの折り返しを設定する
word-breakプロパティは、改行に関する禁則処理の方法を変更するために使われます。
| normal | デフォルトの改行ルールを使用する。 |
|---|---|
| break-all | CJK（中国語、台湾語、日本語、韓国語）以外のテキストで、単語中などにおける文字の改行に関する禁則処理を解除し、どの文字の間でも改行する。 |
| keep-all | CJKのテキストでの改行を許可しない。 CJK以外のテキストではnormalと同じ挙動になる。 |
それでは実際の動作を確認してみましょう。
|
1 2 3 4 5 6 7 |
.sample-01 { width: 300px; padding: 5px; background: #F4F4F4; border: 1px solid #ccc; word-break: [ここに値を入力]; } |
word-break: break-allはテキストがボックス内に収まっていますが、他の2つを見るとはみ出しているのが確認できます。
word-break: keep-allに限っては環境によっては英語だけでなく日本語もはみ出します。
まとめ
CSSでテキストを折り返してはみ出さないようにする方法について解説しました。
文章をボックス内に収めるためにはword-wrap: break-wordかword-break: break-allが使えます。
しかし、word-break: break-allはテキストの折り返し制御には使わない方が良いと言われています。
なぜなら、改行に関する禁則処理が解除されるため、好ましくない位置で単語を折り返すことがあるからです。
英単語の途中で折り返されたり、日本語の場合でも行頭が句読点で始まるようなことを避けたい場合はword-wrap: break-wordを使いましょう。