3

問題の 2 つのスナップショットを次に示します。

普通

スクロールした

h3 の黄色の背景がどのように切り取られているかがわかりますか?

ここにjsfiddleがあります

コードは次のとおりです。

    <style>
        .OutputDiv {
            background-color: lightcyan;
            overflow: auto;
            border: solid 2px black;
            width: 500px;
        }

        h3 {
            margin-top: 0px;
            background-color: yellow;
        }
    </style>


    <div class="OutputDiv">
        <h3>My Title is Here</h3>
        <pre>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
               </pre>
    </div>

h3 を含む背景色の別の div を追加できることはわかっていますが、h3 はブロック レベルの要素です。

何か案は？

4

3 に答える 3

4

はブロック レベルの要素です<pre>が、この場合のコンテンツの動作は異なります。コンテンツは改行とスペースを維持する必要があるため、<pre>タグはwhite-space: pre;デフォルトで属性を使用します。あなたの場合、要素<pre>と<h3>要素の両方がブロック要素のように動作するため、幅は親によって設定されます。ただし、要素内のテキスト<pre>はこれらの規則に従っておらず、オーバーフローするため、スクロールバーが親に表示されます。

等幅フォントに pre タグを使用しているだけの場合は、要素にwhite-space: normalルールを適用できます。<pre>

それ以外の場合、この HTML 構造が必要でない場合は、代わりに要素に を追加overflow: autoし<pre>、ラッパー要素から削除できます。

pre {
  overflow: auto;
  margin-bottom: 0;
}

編集: div全体をスクロール可能にし たい場合は、ラッパー div を<h3>andの周りに追加し、その<pre>表示を に設定しinline-blockます。これにより、内側のラッパーがコンテンツから幅を取得し、ブロック レベルも<h3>この幅に一致するようになります。デモについては、このフィドルを確認してください。margin-bottomこれにより垂直スクロールバーが導入されますが、から を削除する<pre>と修正されるはずです。

編集 2:うん、これが固定された fiddleです。

于 2013-07-22T05:34:24.833 に答える
2

現在、幅を定義することで問題を解決できますh3 tag

デモ

または、使用することができます

pre{white-space: pre-wrap;}

しかし、これはスクロールバーを表示していません。プレラップは100％の幅をカテゴライズし、その後、単語を行の下に移動します。

正しい方法

overflow: auto;メインの div から削除し、 overflow: auto;pre に追加します

デモ

ノート：

pre タグが幅 100% を圧倒しているため、h3 タグがデモのスペースを示しています。

于 2013-07-22T04:34:28.263 に答える
0


h3 タグの幅を定義するか、要素で指定されたテキストの間にタグを含めることで、問題を解決できます。

于 2013-07-22T04:45:05.573 に答える