ホームページ > 記事 > ウェブフロントエンド > プレタグラップを自動的に作成するにはどうすればよいですか?
3b4ad93ea36080674ba857c5f6b82730 タグ内のコンテンツが自動的に折り返され、W3C 標準に準拠します (マルチブラウザーのサポート)
デフォルトでは、3b4ad93ea36080674ba857c5f6b82730 タグ内のコンテンツは自動的に折り返されません。表示や印刷に不具合が生じる場合がございます。
以下は、W3C 標準に準拠し、複数のブラウザをサポートする CSS スタイル コードを提供します:
pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; }
pre タグは HTML コンテンツの形式をそのまま保持しますが、幅が大きすぎるとページが壊れます。現時点では、自動行折り返しが必要です:
Wrapping the pre tagMaking preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let's you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn't wrap: pre {white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }
親タグに DIV を追加し、CSS 属性を設定するのが最善です。スタイルライティング:
<pre style="width:30px;word-break: break-all; word-wrap:break-word;border:1px solid #555"> asfasdfas dfasd fa sdfasdfこの記事では、コードを出力するためにプレフォーマットを使用しています。 デフォルトでは、ブラウザは pre のコンテンツを強制的に改行なしで出力します。この場合、コードは大きくなるにつれてページの外にまで広がっているように見えます。以前、意図的にコードに改行を入れていました...疲れました。今日は意図的にグーグルで検索して見つけました:
pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap;word-wrap: break-word;}テスト後、IE [現在 6 を使用] 以外はすべて可能です...憂鬱です。 width:600px; を追加すると、改行が行われます。実際には、位置はまだ導出されています。次のようになります。コードは入力されていますが、その下の説明は出力されています。つまり、この幅を定義する方法は基本的にCSSを直接変更しない方法はありません。次に、上記の CSS を見て、なぜ他のものを定義するときに空白を使用するのに、IE を定義するときに空白を使用しないのかと考えました。IE が空白をサポートしていないわけではありません。 。したがって、それを追加するだけです [Google の最初の 5 ページを調べましたが、CSS を変更することで解決できる解決策が見つかりませんでした...]。
pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word; white-space : normal ; }このサイトで使用しているIEは、最終的に空白も他のIEに影響を与えるため、IEを他のIEと分けています。
以上がプレタグラップを自動的に作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。