1. gcyata

    Posted

    gcyata
Changes in title
+文字列の折り返しを表現するCSSプロパティ
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,94 @@
+先日、テーブル内に表示している文字列の折り返しを表現する際にちょっと悩んだので調べたことをまとめます。
+
+テーブルのセル内に長い文字列が入る場合、幅を割り当てていてもと意図しない動作をします。以下の単純なサンプルで試してみます。
+
+```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%;
+}
+```
+
+上記のサンプルをブラウザで表示すると下のイメージのように長い文字列がテーブルからはみ出してしまいます。
+
+<img width="761" alt="スクリーンショット 2017-09-24 18.12.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/188446/7d4e9aec-dbad-9104-5b03-fd65bcf4fbd6.png">
+
+このような意図しない動作を避けるために、`word-break`プロパティを使用してみます。style.cssに以下を追加。
+
+
+```style.css
+table td {
+ word-break : break-all;
+}
+```
+
+すると文字列がテーブルセルの内部で改行されています。
+
+<img width="694" alt="スクリーンショット 2017-09-24 18.31.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/188446/327522bb-969b-c35d-8b4a-7a9a616bd71d.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;`を指定する必要があります。
+
+<img width="736" alt="スクリーンショット 2017-09-24 20.15.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/188446/748cf774-8485-db82-c3f2-2df39da5c86f.png">
+
+基本方針として`word-break: break-all;`はできるだけ使わず、親要素を固定レイアウトにし`overflow-wrap`を指定する方法がいいのかもしれません。
+
+ちなみにですが`overflow-wrap`はMicrosoftの独自拡張だった`word-wrap`が多くのブラウザで実装されたためにCSS3 Text仕様書で現在の`overflow-wrap`に改名されました。改名された現在でも`word-wrap`は今のところ問題なく使えます。
+
+# 参考
+
+[overflow-wrap](https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap)
+[word-breakとword-wrapはややこしい](https://w3g.jp/blog/confusing_word-break_word-wrap)