IEで幅を指定した要素の中の文章が自動で改行されない
IEにて、指定した幅を超えても文章が改行されず、幅が広がっていく現象に遭遇、
解決したので、その内容を忘備録的に残す。
HTML
- <table class="u-border1">
- <tr>
- <td class="u-w300">
- <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p>
- </td>
- </tr>
- </table>
|
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ |
IE以外のブラウザでは横幅300pxで自動的に改行されるが、
IEでは改行されずに table が突き抜ける
p には
word-break: break-all;
が設定されている為そんなバカな！？となる。
今回の回答
原因はtableタグに存在するスタイル
table-layout : auto;
IEの場合はこいつがテーブル内の要素に継承され自動改行が効かなくなってしまう。
よって、tableに対して、table-layout: fixed;
これを指定すると指定した幅で自動で改行されるようになる。