【CSS】長いURLでテーブルが崩れる場合

Contents

divでtableの設定。日本語だと長文でも問題無く改行されテーブル内に収まるが、URLだと枠をはみ出し、レイアウトが崩れる。

該当のtd部分にword-breakを設定することで表示が崩れることなく表示できた。
break-allは単語の途中でも改行するため、状況に応じて適用するかどうか判断。

.hoge{
  word-break:break-all;
}

word-breakは改行に関するプロパティ。break-allは、CJK以外の禁則処理を解除し改行できるようにする。break-wordもあるが非推奨。break-allの改行は単語の途中であってもテキストがコンテナからあふれる部分（テーブルの横幅のギリギリ部分）で切れる。