63
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

文字列の折り返しを表現するCSSプロパティ

先日、テーブル内に表示している文字列の折り返しを表現する際にちょっと悩んだので調べたことをまとめます。

テーブルのセル内に長い文字列が入る場合、幅を割り当てていてもと意図しない動作をします。以下の単純なサンプルで試してみます。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <table>
        <tr>
          <th>name</th>
          <th>key</th>
        </tr>
        <tr>
          <td>Jiji</td>
          <td>50csdhdfvf867c7dcv8787cdcndygcsiyyt76d7c</td>
        </tr>
        <tr>
          <td>Kiki</td>
          <td>clmv77543cdkdvbcdc65454hf7565cd6c5mm44c34</td>
        </tr>
      </table>
    </div>
  </body>
</html>
style.css
.container {
  width: 300px;
  height: auto;
  margin: auto;
  background: #CAF6E6;
  padding: 20px;
}

table {
  width: 100%;
}

上記のサンプルをブラウザで表示すると下のイメージのように長い文字列がテーブルからはみ出してしまいます。

スクリーンショット 2017-09-24 18.12.35.png

このような意図しない動作を避けるために、word-breakプロパティを使用してみます。style.cssに以下を追加。

style.css
table td {
  word-break : break-all;
}

すると文字列がテーブルセルの内部で改行されています。

スクリーンショット 2017-09-24 18.31.43.png

しかしながらword-break : break-all;は単語の途中であっても問答無用で折り返します。例のようなランダムな文字列であれば気にしなくていいのかもしれませんが、好ましいとは言い切れません。

好ましい書き方

word-break : break-all;を使わない書き方を紹介します。

table {
  width: 100%;
  table-layout: fixed;
}

table td {
  /*word-break: break-all;*/
  overflow-wrap : break-word;
}

overflow-wrap単語の途中で改行するかどうかを指定するためのプロパティです。改行方法を指定するword-breakとは用途が異なります。そのため、親要素に対してtable-layout: fixed;を指定する必要があります。

スクリーンショット 2017-09-24 20.15.00.png

基本方針としてword-break: break-all;はできるだけ使わず、親要素を固定レイアウトにしoverflow-wrapを指定する方法がいいのかもしれません。

ちなみにですがoverflow-wrapはMicrosoftの独自拡張だったword-wrapが多くのブラウザで実装されたためにCSS3 Text仕様書で現在のoverflow-wrapに改名されました。改名された現在でもword-wrapは今のところ問題なく使えます。

参考

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

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
63
Help us understand the problem. What are the problem?