テーブルのセル内の改行の話

テーブルのセル内の改行と格闘してなんとか手懐けたのでメモ。
ChromeとIE11では確認済み。その他はよくわからん。

とりあえずサンプルhtmlをブラウザで実行してみました。





この表、何も幅指定をしていないので、縮めるとこうなり、





広げるとこうなります。





3行目、2行目を見ると、ウィンドウの幅が狭まったときに中身が自動的に改行されているのがわかります。

では、もう1行追加してみます。




追加したのは3行目のスペースを抜いたものですが、今度は改行してくれずページ下部にスクロールバーが現れました。
何故。私はスクロールバーなんか求めていないのに。改行してほしいのに。
謎を解き明かすべくこいつと格闘して半日消えました。


調べてみました。

word-breakとword-wrapはややこしい
word-break-CSSリファレンス
【CSS3】word-wrap:break-wordとword-break:break-allの違いを説明します

上記を参考に、いろいろ格闘した結果、
table要素全体の値を固定(固定値、またはブラウザサイズ100%とか)に指定
<table border="solid" style="width=100%; table-layout:fixid;">


セルに改行指定と改行の仕方を指定
<td style="word-wrap:break-word; overflow-wrap:break-word;word-break:break-all;">セルの中身</td>



これでなんとかうまくいきました。

実行したらこんな感じ。





word-wrap
orverflow-wrap


この2つは同じ「改行するかどうか?」を指定しています。
互換性を保つために両方とも記述する必要があるようです。


word-break


これで改行方法を設定しています。
今回は単語の途中でもなんでも改行してほしかったのでbreak-allを指定しています。
詳しくは2つめのリンクから。
デフォルトではどうも、半角英数字は単語の途中で改行しない設定になっているようで、
4行目はスペースがどこにもないので1つのながーい単語だと判断されてしまっていたようです。


参考までに、キャプチャのhtmlを貼っておきます。
最近コード貼るやつうまく表示されないんですよね……。原因解明しなきゃ。



では、今回はこの辺りで。