CSSのoverflow-wrap: break-wordは長いURLや連続文字を必要な位置で折り返す

公開日：2015年8月25日執筆：佐藤

空白のない長いURLや識別番号が表示領域からはみ出す場合は、overflow-wrap: break-wordを使います。通常の折返し位置がある文章にはその位置を使い、ほかに折り返せる位置がない文字列だけを途中で分けます。

ただし、white-space: nowrapなどで折返し自体を止めている要素には効きません。最初に表示領域の幅とwhite-spaceを確認し、その後でoverflow-wrapを指定してください。

break-wordははみ出す文字列へ追加の折返し位置を作る

W3CのCSS Text Level 3 Working Draftでは、overflow-wrapを、通常は分割できない文字列がline boxへ収まらない場合に、単語内の任意の位置で折り返してよいかを指定するpropertyとして示しています。

初期値のnormalでは、通常認められる位置だけで折り返します。break-wordでは、ほかに利用できる折返し位置がない場合に限り、長い文字列の途中へ折返し位置を追加します。折り返した位置へhyphenは挿入されません。

この違いは、本文の単語と長いURLを同じ段落へ置くと分かります。空白を含む本文は通常の位置で折り返し、横幅を超える一続きのURLだけを必要な位置で分けます。

次は、記事本文に長いURLが入る場合の説明用の仮例です。

<p class="article-body">
  参照先はhttps://example.com/verylongpathwithoutordinarybreakpointsです。
</p>

.article-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

word-wrapは、overflow-wrapの別名として扱われます。対応対象に合わせて同じ値を併記する場合も、二つを別の働きとして管理する必要はありません。

指定後も文字列がはみ出すなら、対象要素と親要素の実際の幅を調べます。要素に幅の上限がなければ、内容に合わせて横へ広がることがあります。反対に、white-space: nowrapが適用されていれば、overflow-wrapを加えても折り返しません。

開発者用toolでcomputed valueを見て、対象要素のwhite-space、overflow-wrap、実幅を一つずつ確認します。見た目だけでなく、どのselectorから指定が来たかも記録してください。

word-break: break-allは、通常の折返し位置が残っていても、文字の間で折り返せる範囲を広げます。長いURL一件のはみ出しを直すために段落全体へ指定すると、英単語まで細かく分かれ、文章を追いにくくなることがあります。

目的が「通常の文章はそのまま読み、例外的に長い文字列だけ枠へ収める」なら、先にoverflow-wrap: break-wordを試します。すべての文字列を細かく分割したい要件とは分けてください。

また、一行の項目名を省略記号で短く見せる要件には、text-overflow: ellipsisを使います。折返して全文を表示することと、一行の範囲外を隠すことは、同じはみ出し対策でも結論が逆です。

CSSが変えるのは表示です。link先のhref、画面にある文字列、serverへ保存したdataは短くなりません。文字列を隠す目的や、長いURLを変更する目的には使えません。

折返しを制作会社へ依頼する場合は、問題が出る画面幅、対象selector、長い文字列の例、対応するbrowserを渡します。CSSを書く作業を任せても、どの文字列を全文表示するか、どの環境まで確認するかはsite側で決めます。

最初の一手は、はみ出している文字列を一件だけ選び、親要素の幅とwhite-spaceを確認することです。折返しが許可されているのを確かめてからoverflow-wrap: break-wordを加え、通常の文章まで不自然に分かれていないかを同じ画面で見てください。

Logo

戻る