html は タグのスタイルを考慮します

おそらく

 タグを使用します。これは HTML の非常に特別なタグで、タグ内のスペースを実際に表示できるようにします。たとえば、4 つのスペースは実際には 4 つのスペースとして表示されます。これは、タグ間のスペースを 1 つに圧縮する他のタグの通常の動作とは異なります。この観点からすると、<pre class="brush:php;toolbar:false"> タグは非常に便利です。 <p style="padding: 0px; margin: 0px; color: rgb(51, 51, 51); font-family: 微软雅黑, " microsoft yahei sans gb tahoma arial white-space: normal background-color: rgb> </p><pre class="brush:php;toolbar:false"> タグ内で <code> タグを使用していますか? <p></p>
<pre class="brush:php;toolbar:false"> タグの「per」は「preformatted text」（整形済みテキスト）を意味し、中のテキストの内容については特に規定はありません。 <code> タグのセマンティクスは、その中のテキストがコードであることを示します。これは私にとって特に便利で、コードを表示する必要があるときに使用します。例を示します: <pre class='brush:php;toolbar:false;'><pre class="brush:php;toolbar:false"><code>
function cool(x) {
  return x + 1;
}
</code>

説明すると、

<code> の間に改行があります。これも空行として表示され、非常に煩わしいものになります。この問題を解決する適切な CSS 方法はありません。最良の方法は、コードを <pre class="brush:php;toolbar:false"> タグと同じ行で開始するか、コンパイラを使用してここで改行を削除することです。 </p><p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/141/220/754/1499484133429984.jpg"  class="lazy" title="1499484133429984.jpg" alt="html は <pre class="brush:php;toolbar:false"> タグのスタイルを考慮します"/></p><p   style="max-width:90%"Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, 宋体; white-space: normal; background-color: rgb(255, 255, 255);">フォントを選択してください</p><p> <pre class="brush:php;toolbar:false"> タグは主にコード ブロックを表示するために使用され、コードでは通常固定幅フォントが使用されるため、<pre class="brush:php;toolbar:false"> のスタイル フォントを設定することをお勧めします。固定幅フォントにします。 </p><p>幸いなことに、ブラウザのデフォルト フォントはすでに <pre class="brush:php;toolbar:false"> を固定幅フォントに設定しているため、何もする必要はありません。もちろん、お好みのフォントを設定することも可能です。 </p><p>これは、「フォント スタック」を研究した Michael Tuck によって 2009 年に書かれた記事です。フォント スタックとは、font-family タグ内にフォントのグループをリストすることを指します。優先フォントが先頭にリストされ、代替フォントが順番にリストされます。彼の等幅フォント スタックでは、クロスプラットフォーム システムにプリインストールされているフォントがうまく利用されています。 </p><pre class='brush:php;toolbar:false;'>font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", 
"Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", 
"Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

 タグのスタイルを考慮します"/></p><p>フォントスタックが現在廃止されているかどうかはわかりませんが、とにかく良いスタートです。 </p><p>また、カスタムフォントを使用することもできます。またはサードパーティのサービスを使用します。これを書いている時点では、Typekit は 23 個の等幅フォントを提供しています。 </p><p   style="max-width:90%"Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, 宋体; white-space: normal; background-color: rgb(255, 255, 255);">折りますか、折りませんか? </p><p>これは個人的な好みに関するものですが、私個人としては 2 つの状況があります。 </p><p>エディターでコードを記述するとき、水平スクロール バーを使用せずにコードが自動的に折り返されるようにする傾向があります。そして、記事内のコードを読むときに、コードが壊れていないことが気に入っています。これが奇妙であることはわかっています。 CodePen では、誰もが独自の好みを持っているため、ユーザーが中断するかどうかを選択するオプションを提供します。 </p><p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/839/197/758/1499484213362346.gif"  class="lazy" title="1499484213362346.gif" alt="html は <pre class="brush:php;toolbar:false"> タグのスタイルを考慮します"/></p><p>コードを表示するときに、行を折り返すかどうかを選択する必要があります。幸いなことに、ラップすることを選択した場合は、<pre class="brush:php;toolbar:false"> タグに提供されている独自のスタイルを使用して、次のようにラップ中に空白を保持できます。 </p><pre class='brush:php;toolbar:false;'>pre {
  white-space: pre-wrap;
}

ログイン後にコピー

ラップしたくない場合は、ラップする必要はありません。上記と同じことを行いますが、行が長すぎる場合に何が起こるかを考慮する必要があります。行が長すぎると、固定幅のコンテナーが拡張されたり、その境界を超えたりする可能性があります。これを回避するには、水平スクロールバーを追加することをお勧めします:

pre {
  overflow-x: auto;
}

 タグのスタイルを考慮します"/></p><p> また、<a href="http://www.php.cn/wiki/908.html" target="_blank">max-height</a>を考慮して最大の高さを指定し、すべてのスクロールバーがコードブロックが高くなりすぎないようにできるようにするoverflow:autoを検討することもできます。 。 </p><p   style="max-width:90%"Microsoft Yahei", "Hiragino Sans GB", tahoma, arial, 宋体; white-space: normal; background-color: rgb(255, 255, 255);">アダプティブにする必要があるかもしれません</p><p>おそらくあなたも含めて、折り返すこともスクロールすることも好きではない人もいます。この状況にも解決策があります。 <pre class="brush:php;toolbar:false"> をデフォルトのコンテナ幅のままにすることもできますが、対話中に拡張することもできます。<pre class='brush:php;toolbar:false;'>pre:hover,
pre:focus {
  width: min-content;
}

ログイン後にコピー