htmlのpreタグで自動改行

この場合、overflow:auto;（コンテナの枠外にコードがあるときにスクロールボックスを表示する）を使用することができますが、一部のブラウザでは枠外のコンテンツが単に切り捨てられるため、この方法もすべての主要ブラウザで機能するわけではありません。

私たちは皆、次のことを知っています。 <pre> タグ は整形済みテキストを定義することができ、一般的な用途としては、コンピュータのソースコードを表現することが挙げられます。pre要素で囲まれたテキストは通常、スペースと改行を保持しますが、残念ながら<pre>タグの中にコードを書くと、自動改行をせずに、手動で改行しなければ、改行もされます。

このとき overflow:auto。 (コードがコンテナの境界を超えたときにスクロールボックスを表示する) しかし、この方法もすべての主要なブラウザで機能するわけではありません。一部のブラウザでは、オーバーフローしたコンテンツは単に切り捨てられるだけだからです。

このサイトではソースコードはあまり使われないので、以前はこの問題をあまり気にしていなかったのです。しばらく前に、熱心なユーザーからQQでこの問題についてのフィードバックがあったので、今回のテーマ変更を機に解決策を探し、共有することにしました。

このCSSスキームにより、preタグ内のテキストが自動的に改行されるようになります。手持ちのブラウザでテストしたところ、IE6, IE7, IE8, Firefox, Opera, Safari, Chromeのすべてに対応しています。
ウィンドウを幅20文字以下に縮小したときのみ、ボーダーを超えるようになります
また、このCSSのトリックを共有することで、長い単語の改行が解決されるという書き込みをいくつか見かけましたが、試してみましたが、やはりうまくいきませんね。