h3元素没有正确填充带有水平滚动条的div

Question

以下是该问题的两个快照。

看看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>

我知道我可以添加另一个带背景颜色的div来包含h3，但是h3是一个块级元素。

有什么想法吗？

Answer 1

即使<pre>是块级元素，但在这种情况下，它的内容行为也不同。由于内容必须维护换行符和空格，因此<pre>标记默认使用属性white-space: pre;。在您的情况下，<pre>和<h3>元素的行为类似于块元素，因此它们的宽度由其父元素设置。但是，<pre>元素中的 text 不遵循这些规则并溢出，导致滚动条显示在父级上。

如果您只是使用等宽字体的预标记，则可以将white-space: normal规则应用于<pre>元素。

否则，如果不需要此HTML结构，则可以将overflow: auto添加到<pre>元素，并将其从包装元素中删除。

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

修改 如果您希望整个 div可滚动，请在<h3>和<pre>周围添加包装div，并将其显示设置为inline-block。这将强制内包装器从其内容中获取其宽度，并且还将强制块级<h3>匹配此宽度。查看this fiddle了解演示。这确实引入了垂直滚动条，但从margin-bottom中移除<pre>应该可以解决此问题。

编辑2：是的，这是fixed fiddle。

Answer 2

目前，您可以通过定义h3 tag

的宽度来解决问题

demo

或者，您可以使用

pre{white-space: pre-wrap;}

但是这并没有显示滚动条，因为预包装会产生100％的宽度，之后它会将单词移到该行下方。

正确的方式

从主div中删除overflow: auto;并将overflow: auto;添加到前

demo

注意：

由于预标签的宽度超过100％，因此h3标签会显示演示中的空间。

Answer 3

您可以通过定义h3标签的宽度或在元素中给出的文本之间包含
标签来解决您的问题。