<pre> タグでフォーマット済みのテキストを定義できることは誰もが知っており、一般的な用途はコンピューターのソース コードを表すことです。通常、pre 要素で囲まれたテキストには空白と改行が保持されますが、残念なことに、<pre> タグ内にコードを記述する場合、手動で改行をラップしないと、改行の代わりに改行も保持されてしまいます。 このサイトではソースコードが使用されている場所があまりないので、以前はこの問題をあまり気にしていませんでしたが、少し前に熱心なネットユーザーがこの問題を QQ で報告したため、今回テーマを変更したときに調べてみました。解決策を見つけて共有しました。 この CSS ソリューションは、pre タグ内のテキストを自動的に折り返すことができます。私が所有するすべてのブラウザでテストしましたが、すべて IE6、IE7、IE8、Firefox、Opera、Safari、Chrome をサポートしています。 ウィンドウを幅 20 文字未満に縮小した場合にのみ、範囲外になります。
このとき、overflow:auto; を使用できます (コードがコンテナの境界を超えると、スクロール ボックスが表示されます)。ただし、この方法はすべての主流ブラウザに適しているわけではなく、一部のブラウザでは超えたコンテンツが直接切り捨てられます。前 {
ホワイトスペース: 事前ラップ; /* css-3 */
ホワイトスペース: -moz-pre-wrap; /* Mozilla、1999 年以降 */
空白: -pre-wrap; /* Opera 4-6 */
空白: -o-pre-wrap; /* Opera 7 */
ワードラップ: ブレークワード /* Internet Explorer 5.5 以降 */
}