HTML pre タグ内の自動改行

このとき、overflow:auto;（コードがコンテナの境界を超えたときにスクロールボックスを表示する）を使用できますが、この方法はすべての主流ブラウザで機能するわけではありません。一部のブラウザでは、余分なコンテンツが直接切り取られます。

<pre> タグはフォーマット済みのテキストを定義できることは誰もが知っています。一般的な用途は、コンピュータのソースコードを表すことです。 pre 要素で囲まれたテキストは通常、スペースと改行を保持しますが、残念ながら、<pre> タグ内にコードを記述する場合、手動で折り返さないと、スペースと改行も保持され、自動的に折り返されません。

このとき、 overflow:auto; （コードがコンテナの境界を超えたときにスクロールボックスを表示する）を使用できますが、この方法はすべての主流ブラウザで機能するわけではありません。一部のブラウザでは、余分なコンテンツが直接切り取られます。

pre wrap 解決<pre>標簽里的文本換行(兼容IE, FF和Opera等)

このウェブサイトではソースコードを使用する箇所があまりなく、これまでこの問題にあまり注意を払っていませんでしたが、少し前に熱心なネットユーザーがQQでこの問題を報告したので、今回テーマを変更したときに解決策を探して共有しました。

コードをコピー

コードは次のとおりです。

前 {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla、1999 年以降 */
white-space: -pre-wrap; /* Opera 4-6 */
空白: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

この CSS ソリューションにより、pre タグ内のテキストを自動的に折り返すことができます。私はこれをすべてのブラウザでテストしましたが、IE6、IE7、IE8、Firefox、Opera、Safari、Chrome など、すべてのブラウザでサポートされています。
境界線が境界外になるのは、ウィンドウの幅を 20 文字未満に縮小した場合のみです。また、この CSS テクニックを紹介する投稿をいくつか見かけましたが、長い単語の折り返しの問題を解決できるとのことでしたが、試してみたところ、うまくいきませんでした。

<<: Docker ファイルの保存パス、ポートマッピング操作モードの変更

>>: JavaScript で Webpack を使用するチュートリアル