More than 3 years have passed since last update.

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

Last updated at 2021-03-17Posted at 2021-03-17

現象

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;
}

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