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

推薦する

CentOS に PHP5 をインストール、PHP をアンインストール、PHP7 をインストールするチュートリアル

まず、PHP5をインストールするのはとても簡単ですyum install php PHP5 を使用し...

MySQL グリーン解凍バージョンのインストールと設定手順

手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....

MySQL 学習 (VII): Innodb ストレージ エンジン インデックスの実装原理の詳細説明

概要データベースでは、ツリー ディレクトリと同様に、インデックスを使用してデータ検索を高速化します。...

Vue Elementのテーブルコンポーネントをカプセル化する方法

Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...

VMware 仮想マシンのインストール win7 オペレーティング システム チュートリアル ダイアグラム

VMwareaのインストールプロセスは説明しませんが、主にwin7イメージをロードする方法を説明しま...

TomcatはLog4jを使用してcatalina.outログを出力します。

Tomcat のデフォルトのログは java.util.logging を使用しますが、これにはい...

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード <テンプレート> <表示> <image v-for...

Vueはv-modelを使用してel-paginationコンポーネントのプロセス全体をカプセル化します。

v-model を使用してページング情報オブジェクトをバインドします。ページング情報オブジェクトに...

js オプション連鎖演算子の使用

序文オプションの連鎖演算子 (?.) を使用すると、チェーン内の各参照が有効であることを明示的に検証...

Vueはページング機能を実装する

この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...

DockerはCMDまたはENTRYPOINTコマンドを使用して複数のサービスを同時に起動します

要件: Celery は Django に導入されています。Django プロジェクトを開始するとき...

LinuxはMySQLデータベースの自動バックアップとスケジュールバックアップを毎日実装しています

概要バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

ショートビデオ(Douyin)の透かし除去ツールの実装コード

目次1. まず最初のリンクを取得する2. ブラウザでこのリンクを開いてください3. アドレスを開くと...

Vueフォームバインディングとコンポーネントの詳細な説明

目次1. 双方向データバインディングとは1. データの双方向バインディングを実装する必要があるのはな...

Ansible を使用した Nginx のバッチ デプロイのサンプル コード

1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...