CSSで文字列を自動で折り返し・改行して表示させる

2018.11.24
2019.01.25
Webスキル

よこのじ（@yokonoji_work）です。

文字が枠の端まで到達したのに折り返さずに、突き抜けて表示されていることがあります。これはCSSの「overflow-wrap（word-wrap）」「word-break」を使って自動で折り返し・改行して表示させる方法で回避できます。これらのプロパティの挙動について整理しておきます。

1. 自動で折り返し・改行する
- 1.1. overflow-wrap（word-wrap）
- 1.2. word-break
2. 確認用コード

自動で折り返し・改行する

overflow-wrap（word-wrap）

プロパティword-wrapはもともとMicrosoft拡張でしたが、CSS3の仕様策定においてoverflow-wrapが同様の機能として定められました。

値としてnormalとbreak-wordを指定できます。

// 改行ポイントで改行するが、単語の途中では改行しない。
word-wrap: normal;

// 改行ポイントがあれば、単語の途中でも分割して改行する。
word-wrap: break-word;

こちらは、2つの値それぞれで表示させたものです。「qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm」という長い単語を含んでいますが、この単語が改行されているかどうかの違いが分かります。

word-break

overflow-wrap（word-wrap）とは別の改行指定方法がword-breakです。値としてnormal、break-all、keep-all、break-wordを指定できます。

// 改行ポイントで改行するが、単語の途中では改行しない。
word-break: normal;

// 中国語、台湾語、日本語、韓国語以外のテキストにおいて、
// 単語の途中でも分割して改行することを許可する。
word-break: break-all;

// 中国語、台湾語、日本語、韓国語のテキストの改行を許可しない。
// 他の言語のテキストnormalと同じ（単語の途中では改行しない）。
word-break: keep-all;

// 行内で適切に改行できるポイントがない場合に限り、単語の途中でも改行する。
word-break: break-word;

こちらは4つの値それぞれで表示させたものです。break-allは、他と違って長い単語があった場合でもそのまま詰めて表示させるのが特徴的です。URLのように単語の途中で改行してしまっても良いものはコンパクトにまとめるためにbreak-allを使うと良さそうです。

確認用コード

今回確認のために書いたHTML、CSSコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">

<style>
  p {
    width: 300px;
    background-color: aquamarine;
  }
  .overflow-wrap-normal {
    overflow-wrap: normal;
  }
  .overflow-wrap-break-word {
    overflow-wrap: break-word;
  }
  .word-break-normal {
    word-break: normal;
  }
  .word-break-break-all {
    word-break: break-all;
  }
  .word-break-keep-all {
    word-break: keep-all;
  }
  .word-break-break-word {
    word-break: break-word;
  }
</style>

</head>
<body>
    
  <b>normal</b>
  <p class="overflow-wrap-normal">HTML CSS Python qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm Ruby Rails JavaScript.<br>あいうえお かきくけこ ああああああああああああああああああああああああああ。
  </p>

  <b>break-word</b>
  <p class="overflow-wrap-break-word">HTML CSS Python qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm Ruby Rails JavaScript.<br>あいうえお かきくけこ ああああああああああああああああああああああああああ。</p>

  <b>normal</b>
  <p class="word-break-normal">HTML CSS Python qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm Ruby Rails JavaScript.<br>あいうえお かきくけこ ああああああああああああああああああああああああああ。</p>

  <b>break-all</b>
  <p class="word-break-break-all">HTML CSS Python qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm Ruby Rails JavaScript.<br>あいうえお かきくけこ ああああああああああああああああああああああああああ。</p>

  <b>keep-all</b>
  <p class="word-break-keep-all">HTML CSS Python qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm Ruby Rails JavaScript.<br>あいうえお かきくけこ ああああああああああああああああああああああああああ。</p>

  <b>break-word</b>
  <p class="word-break-break-word">HTML CSS Python qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm Ruby Rails JavaScript.<br>あいうえお かきくけこ ああああああああああああああああああああああああああ。</p>

</body>
</html>

参考サイト

overflow-wrap

word-break

word-breakとword-wrapはややこしい