--- title: 文字列の折り返しを表現するCSSプロパティ tags: CSS HTML CSS3 author: gcyata slide: false --- 先日、テーブル内に表示している文字列の折り返しを表現する際にちょっと悩んだので調べたことをまとめます。 テーブルのセル内に長い文字列が入る場合、幅を割り当てていてもと意図しない動作をします。以下の単純なサンプルで試してみます。 ```index.html Sample
name key
Jiji 50csdhdfvf867c7dcv8787cdcndygcsiyyt76d7c
Kiki clmv77543cdkdvbcdc65454hf7565cd6c5mm44c34
``` ```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](https://developer.mozilla.org/ja/docs/Web/CSS/overflow-wrap) [word-breakとword-wrapはややこしい](https://w3g.jp/blog/confusing_word-break_word-wrap)