【CSS】テキストを折り返してはみ出さないように改行する方法

CSS

長い英単語の文章などは改行されずにボックスをはみ出してしまうことがあります。

テキストがページの横幅を大きくはみ出してしまうとスマホでは横スクロールが発生するので、縦スクロールをしたつもりが横スクロールになることもあってストレスを感じてしまいます。

※このページはスマホで見た場合に敢えて横スクロールが発生するようにしてあります。

ユーザーに快適にサイトを閲覧してもらうためには無駄な横スクロールは発生しないようにすべきです。

CSSのword-wrapoverflow-wrap)あるいはword-breakプロパティを使ってテキストがはみ出さないように調整しましょう。

この記事ではそれら各CSSプロパティの使い方をサンプルを交えて解説します。

スポンサーリンク

CSSでテキストの折り返しを設定する前後を比較

まずはテキストがはみ出した状態を確認してみましょう。

確認用コードは以下の通り。

HTMLコードは後の説明でも同じものを使います。

テキスト折り返しの設定前
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890

グレーで示した横幅300pxのdivタグのボックス内にテキストが収まって欲しいのですがはみ出してしまっています。

これを解決するには文字を囲むタグのCSSに1行だけプロパティを追加してやることで綺麗にボックス内に収まるようになります。

テキスト折り返しの設定後
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890

上記ではword-wrapを使っていますが、似たようなプロパティにword-breakもあります。

次からはこれらがどう違うのかについて解説していきます。

word-wrapでテキストの折り返しを設定する

word-wrapoverflow-wrap)プロパティは、単語の途中で改行しないと文字列が長すぎて包含ボックス内に収まらない時に、はみ出さないように改行を行うかどうかを決めます。

word-wrap
normal 通常の単語の分割位置でのみ改行する。
break-word 行内に改行可能な箇所がないときに、通常分割できない単語を任意の箇所で分割して改行する。

それでは実際の動作を確認してみましょう。

word-wrap: normal
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890
word-wrap: break-word
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890

word-wrap: normalだと英語がボックスをはみ出してしまいますが、word-wrap: break-wordだと綺麗に収まります。

word-breakでテキストの折り返しを設定する

word-breakプロパティは、改行に関する禁則処理の方法を変更するために使われます。

word-break
normal デフォルトの改行ルールを使用する。
break-all CJK(中国語、台湾語、日本語、韓国語)以外のテキストで、単語中などにおける文字の改行に関する禁則処理を解除し、どの文字の間でも改行する。
keep-all CJKのテキストでの改行を許可しない。
CJK以外のテキストではnormalと同じ挙動になる。

それでは実際の動作を確認してみましょう。

word-break: normal
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890
word-break: break-all
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890
word-break: keep-all
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890ABCDEFGHIJKLMNOPQRSTUVWXYG1234567890

word-break: break-allはテキストがボックス内に収まっていますが、他の2つを見るとはみ出しているのが確認できます。

word-break: keep-allに限っては環境によっては英語だけでなく日本語もはみ出します。

まとめ

CSSでテキストを折り返してはみ出さないようにする方法について解説しました。

文章をボックス内に収めるためにはword-wrap: break-wordword-break: break-allが使えます。

しかし、word-break: break-allはテキストの折り返し制御には使わない方が良いと言われています。

なぜなら、改行に関する禁則処理が解除されるため、好ましくない位置で単語を折り返すことがあるからです。

英単語の途中で折り返されたり、日本語の場合でも行頭が句読点で始まるようなことを避けたい場合はword-wrap: break-wordを使いましょう。

スポンサーリンク

フォローする