1

次のスタイルの pre 要素があります。

pre {
    background: #555;
    background-image: -webkit-linear-gradient(#555 50%, #505050 50%);
    background-image:    -moz-linear-gradient(#555 50%, #505050 50%);
    background-image:     -ms-linear-gradient(#555 50%, #505050 50%);
    background-image:      -o-linear-gradient(#555 50%, #505050 50%);
    background-image:         linear-gradient(#555 50%, #505050 50%);
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 4.5em 4.5em;
    color: #fff;
    font-size: .8em;
    line-height: 2.25;
    margin: 0 -2.25em 2.25em;
    overflow: auto;
    padding: 2.25em;
}

要素をスクロールするときにpre、右のパディングが無視されるのはなぜですか? 長い行を折り返す必要はありません。この動作が必要です (仕様に基づくと予想される動作ではありませんが、Webkit では動作するようです): http://jsfiddle.net/joshnh/Ly5kz/

ライブの例へのリンクは次のとおりです。

4

4 に答える 4

3

それは、パディングがどのように機能するかではありません。コンテンツがボックスの端を越えて強制されている場合、背景に覆われることなく続きます。パディングは、ボックスの内側のセクションの周りのスペースです。ボックスに収まるすべてのテキストは、テキストとボックスの端の間に x のスペースがあります。

パディングのようなマット/ボックス/ボーダーを作成するには、ボーダーとパディングを含むラッパー div を作成し、他のスタイルをプレに追加する必要があります。

http://jsfiddle.net/ktJ3g/

于 2012-09-14T02:44:02.340 に答える
0

pre 要素はデフォルトで white-space:nowrap です。何らかのラップ属性を設定する必要があります。オプションは次のとおりです: http://www.w3schools.com/cssref/pr_text_white-space.asp

于 2012-09-04T01:09:45.260 に答える
0

white-space: pre-wrap; を試してください。- また、コンテンツに html または css が含まれていることを識別するために lang 属性を使用して悪用していると思います。コンテンツの言語エンコーディング、つまり en_US、fr_FR などを示すために使用する必要があると思います。

于 2012-09-04T01:26:42.563 に答える