長い英単語の文章などは改行されずにボックスをはみ出してしまうことがあります。
テキストがページの横幅を大きくはみ出してしまうとスマホでは横スクロールが発生するので、縦スクロールをしたつもりが横スクロールになることもあってストレスを感じてしまいます。
※このページはスマホで見た場合に敢えて横スクロールが発生するようにしてあります。
ユーザーに快適にサイトを閲覧してもらうためには無駄な横スクロールは発生しないようにすべきです。
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
)プロパティは、単語の途中で改行しないと文字列が長すぎて包含ボックス内に収まらない時に、はみ出さないように改行を行うかどうかを決めます。
それでは実際の動作を確認してみましょう。
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
プロパティは、改行に関する禁則処理の方法を変更するために使われます。
それでは実際の動作を確認してみましょう。
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
を使いましょう。