word-wrapでも改行できない場合の対応策

コーディング作業で、テキストが意図したように折り返してくれない場所では、word-wrap:break-word;を設定します。
しかし、table-cellを指定している場合、思うように改行できない時があります。それは、urlを記述している時なんです！（他にも条件はあります。）

これは、通常ではあまり使わないかもしれませんが、ちょうど現在、会社で新しいツールを作っていて、urlを表示させる…そんな場面があったので、調べてみました。

table-cellを指定したword-wrapの挙動

下記に、簡単なサンプルを用意してみました。
少しわかりにくいかと思いますが、1つ目は200pxの幅で、2つ目が、table-cellにurlを入れたものです。このように、200pxを指定しても改行されません。ちなみにブラウザはChrome、Firefox、safari辺りでは同じ挙動でした。（自宅でMacでも確認しました。）
※ハイフンを入れるとなぜかword-wrapが有効となりました。ソースでご確認ください。

この幅は200pxです

 

そんな時には、word-break:break-all;で強制的に改行させることができます。

webproductlab.comwebproductlab.comwebproductlab.comwebproductlab.com

 

わかりにくいサンプルで申し訳ないです。。
ただ、このword-break:break-all;という設定は、意図しない単語の中途半端な箇所で改行されることがあるので、できれば、あまり使いたくないプロパティですね。

w3g.jp

こちらの記事にあるように、word-wrapを指定する時は、まだサポートされていないブラウザへの対応として、

word-wrap:break-word;
overflow-wrap:break-word;

と、記述します。

このtable-cellとword-wrapの組み合わせでの挙動は、あまり使う機会が無かったため、なかなか気付きませんでした。。

table-cellの余白の設定は？

そしてtable-cellにはmarginが効きません。（paddingは効きますが、デザインによってはmarginを使いたい場合があります。）
強制的に余白を付けたい場合は、あまり腑に落ちませんが…table-cellを設定したdivではなく、その親divの、display:table;を記述しているスタイルに、こちらを追記します。

border-collapse: separate; //間隔を空ける
border-spacing: 2px 0; //左右 上下を指定

www.tam-tam.co.jp

この記述だと、並べたtable-cellの余白を個別に細かく指定することはできません。

しかし、やっぱりtable-cellを使う最大のメリットの、vertical-alignで上下中央に揃えることができることから、この組み方は重宝します。

もし、それが難しい場合は、floatで並べるしかありません。
ということで私は、floatとtable-cellは、デザインによって使い分けるようにしています。