プレタグラップを自動的に作成するにはどうすればよいですか?

黄舟
リリース: 2017-07-08 11:52:12
オリジナル
4380 人が閲覧しました

 タグ内のコンテンツが自動的に折り返され、W3C 標準に準拠します (マルチブラウザーのサポート) </p>
<p>デフォルトでは、<pre /> タグ内のコンテンツは自動的に折り返されません。表示や印刷に不具合が生じる場合がございます。 </p>
<p>以下は、W3C 標準に準拠し、複数のブラウザをサポートする CSS スタイル コードを提供します: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">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&#39;s you use the pre tag to keep the formatting, 
without cursing yourself when some of the content is too long and doesn&#39;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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート