word-wrapが効かない理由

こんにちわ。絶賛サイトデバッグ中のma-ya’s CREATE［まーやずくりえいと］です。

デバッグ中のことではないんですが、制作中にCSSのword-wrapが何故か効かない窮地に陥ったのでメモ。

「word-wrap:break-word;」には効かないケースがある

調べているうちにわかったのがword-wrap指定には適用されないケースがあるということ。

これは知らないとわからん。もっと早いうちにググっときゃ良かったと後悔しました。

「display:table-cell;」 に要注意

word-wrap:break-word; が効かない原因として詳しくは下記サイトを参考にしました。

というか、勉強させて頂きましたmm

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

↑のサイトによれば、

長い英単語や長いURLの折り返しを制御するにあたって、望ましい振る舞いをしてくれるword-wrap:break-word;(overflow-wrap:break-word;)ですが、効いていないような振る舞いになるスタイル状況下があります。shrink-to-fit width（内容にぴったりと合うように縮んだ幅）になっている場合と自動レイアウトアルゴリズム（table-layout:auto;）を使用しているテーブルセル（display:table-cell;）の場合です。

とのこと。

そしてぼくの場合、word-wrap:break-word; を指定しようとした親要素には display:table-cell; が指定されていました。

原因はこれ。

他の方法でレイアウトし直そうか悩んだんですが、ページのコーディングがあらかた終わった後に気が付いたのでそれもちょっと面倒だな～と悩んでたら、解決法も載っていたのでありがたく↓の方法を使わせて頂きました。

display:table-cell;要素の親要素（display:table;）に対して下記を指定

1. table-layout:fixed; を指定
2. widthを指定

この二つでズバリ解決。ありがたや。

ぶっちゃけて言うとword-break:break-all; で切り抜けてもいいかなと思ったんですが、あまりスマートではない方法という意見も多いんですよね。

だもんで、それは避けて何とかしようと思ってた矢先、めでたく解決となりました。まあ↑のサイト様のおかげですけどね…

早く自分も仕様も含めたわかりやすい考察記事を書けるようになりたいですな。