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