49

この画像は、コードで何が起こっているかを示しています これは私のブログページです。ブログでC＃、PHP、その他のコードスニペットを使用しなければならない場合があります。したがって、preタグを使用して見栄えを良くし、フォーマットコードをそのまま維持します。preタグの幅は100％で、背景色があります。ただし、上の画像のようにテキストが消え、水平スクロールバーが表示されます。どうすればこれを克服できますか？下部のスクロールバーは必要ありません。

4

5 に答える 5

87

いくつかの解決策があります：

最も簡単なのは、テキストに改行を配置することです。ただし、ブラウザウィンドウが適切なサイズでない限り、右マージンが大きくなるか、スクロールバーが発生するため、これはおそらく望ましいことではありません。

もう1つはwhite-space:pre-wrap;、CSSで<pre>タグに使用することです。これにより、テキストは必要に応じて新しい行に折り返されますが、ソースに存在するすべての空白は保持されます。このCSSプロパティの詳細については、https：//developer.mozilla.org/en-US/docs/Web/CSS/white-spaceを参照してください。

または、（手動または自動ワードラップによって）改行を追加したくない場合は、<pre>タグに次のCSSプロパティのいずれかを使用できます。

  • overflow-x:hidden;これにより、右端を超えて伸びるテキストが切り取られます。まったく表示されません。
  • overflow-x:scroll;これにより、テキストが右端を超えた場合に、スクロールバーがWebページ内に表示されます。これにより、ページ全体が広くなりすぎてスクロールバーが下部に表示されるのを防ぐことができます。例については、 http：//www.w3schools.com/cssref/playit.asp？filename = playcss_overflow-x＆preval=scrollを参照してください。
  • overflow-x:auto;overflow-x:scroll;スクロールバーが必要な場合にのみ表示されることを除いて、同様です。（コメントのccalvertに感謝します）
于 2012-12-03T03:38:47.570 に答える
9

スタイルを追加：

pre { 
    white-space: pre-wrap; 
    word-break: break-word;
}
于 2018-09-06T07:54:08.167 に答える
3

私の行は<a>タグに含まれています。これは私のために働きます：

a, pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
于 2019-10-14T07:22:28.257 に答える
2

いくつかのCSSプロパティを使用できます。

pre {
display: flex;
white-space: normal;
word-break: break-word;
}

オプションで、<pre>が内部にある場合<span>：

span pre { display: inline-flex; }
于 2016-07-10T00:10:57.150 に答える
1

ラッパーdivを追加し、次のCSSプロパティを追加できます

{
   div#wrapper {
      overflow: scroll;
      display: grid;
   }
}
于 2022-02-02T12:41:49.540 に答える