table のセル内でテキストが折り返さない時の解決方法

1879 ワード
CSS 解決方法 CSS テキストリンク

現象

table 内のセルで英数字が折り返さず横幅を広げてしまう…

原因

改行に関する CSS プロパティ overflow-wrap が効いていない。

css
table {
  overflow-wrap : break-word;
  /* IE11 にも改行させる場合 */
  word-wrap: break-word;
}

解決方法

table のレイアウトに関する CSS プロパティ table-layout を設定する。

css
table {
  table-layout: fixed;
  overflow-wrap : break-word;
  /* IE11 にも改行させる場合 */
  word-wrap: break-word;
}

これでセル内で英数字が改行されました！