3

这是问题的两个快照。

普通的

滚动

看看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 是块级元素。

有任何想法吗？

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 可滚动，请在<h3>and周围添加一个包装 div <pre>，并将其显示设置为inline-block. 这将强制内部包装器从其内容中获取其宽度，并且还将强制块级别<h3>与此宽度匹配。看看这个小提琴的演示。这确实引入了一个垂直滚动条，但从应该解决这个问题margin-bottom。<pre>

编辑2：是的，这是固定的小提琴。

于 2013-07-22T05:34:24.833 回答
2

目前你可以通过定义你的宽度来解决你的问题h3 tag

演示

或者，您可以使用

pre{white-space: pre-wrap;}

但这并没有显示滚动条，因为 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 回答