Perl Web開発者のHTML・CSS入門

preタグで文字を折り返し改行する

preタグは、デフォルトでは、文字が改行されません。文字を右端で折り返すようにするにはCSSの「white-space」に「pre-wrap」を指定します。右側にビヨーンと、文字が飛び出ると格好悪いので調整しましょう。

pre {
  white-space: pre-wrap;
}

文字単位で改行したい

単語単位ではなく、文字単位で改行をしたい場合は、上記に加えてCSSの「word-break」に「break-all」を設定します。とっても長い文字列が、右側にびよーんと飛び出ている状態を解消できます。

pre {
  white-space: pre-wrap;
  word-break:break-all;
}