【CSS】文字列が長いときにレイアウト崩れが発生するのを回避する方法

文字列制限の動作確認時などにランダムに生成した文字列をテスト保存・表示確認するパターンって多分よくあると思います。

で、表示確認の際、長い文字列がボックスからあふれ出してレイアウト崩れが発生しました。

例: ランダムで生成した文字列を表示してみるとブラウザを突き抜ける勢いでびょーんってのびちゃう

これをスタイルで修正する場合は、囲っている <div class='hoge'> のクラス指定に word-break を指定することで解決します。

対象のクラスに以下のスタイルを適応させる

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