Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

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はややこしい

gcyata
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした