HTML/CSSメモ: pre 要素でもテキストがはみ出さないように折り返す

pre 要素を使用してソースコードなどを表示しているときに、あまりにも長い行があると、デフォルトでは親要素をはみ出して表示してしまいます。

親要素の幅いっぱいで折り返すようにするには、以下のようにスタイルを設定します。

pre {
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}