HTML pre タグ内の自動改行

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 を使用するチュートリアル

推薦する

フロントエンドHTMLスキン変更機能の実装コード

透明を含む5つの肌の色を変更するには50行のコードが必要です最初にコードをお渡ししますので、ご自身で...

MySQL交換パーティションの詳細な例

MySQL交換パーティションの詳細な例序文exchange パーティションを紹介する前に、まず my...

Linux プログラムの実行中に動的ライブラリをロードできない場合の解決策

Linux でダイナミック ライブラリをロードできません次のような異常事態が発生した場合./test...

JavaScript でプロトタイプ パターンを実装する方法

概要プロトタイプ パターンは、プロトタイプ インスタンスによって作成されるオブジェクトの型を指し、こ...

計算機機能を実装するミニプログラム

この記事の例では、計算機機能を実装するためのミニプログラムの具体的なコードを参考までに共有しています...

MySQL で絵文字表現を挿入できない理由と解決策

失敗のシナリオMySQL データベースに絵文字表現を挿入するために JDBC を呼び出すと、例外ja...

mysqlはエクスポートされたデータのsqlファイルから指定されたテーブルのみをインポートすることを実装します

シナリオ昨日、システムは dbAll.sql.gz という名前の特定のデータベースのすべてのテーブル...

MySQL インデックスのクイックガイド

MySQL インデックスの確立は、MySQL の効率的な操作にとって非常に重要です。インデックスによ...

JS WebSocket 切断理由とハートビートの仕組みの詳しい説明

1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...

HTML ヘッドタグの詳細な紹介

HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...

Mysql の mysql.user ユーザー テーブルの詳細な説明

MySQL は、異なるユーザーに異なる権限を割り当てることができるマルチユーザー管理データベースであ...

Nginx で IP と IP 範囲をブロックする方法

前面に書かれたNginx は単なるリバース プロキシおよび負荷分散サーバーではなく、電流制限、キャッ...

初心者向けMySQLシリーズチュートリアル

目次1. 基本概念と基本コマンド1) 基本的な概念2) 基本コマンド2. SQL文の記述順序と実行順...

Vue での keepAlive の使用例の詳細な説明

開発においては、一覧から詳細ページにジャンプし、また詳細ページに戻る際に一覧ページの状態(スクロール...

MySQL データベース グループ クエリの group by ステートメントの詳細な説明

1: グループ化関数の記述順序 1 選択 ... 2 から ... 3 どこで ... 4 グループ...