Question

假设我有一个块元素，例如h2：

<h2>Title</h2>

我给它一个背景色。背景将跨越包装器的整个宽度（应该如此）。

如果我漂浮它，或position: absolute，它将“收缩”包装词。但是，这两种方法都会将元素从“流”中移除，并阻止它将其余内容推送到页面中。

我希望每次都不要在标题下添加明确的内容。有更好的解决方案吗？我认为overflow属性可以做到，但我不知道它。

小提琴：

Answer 1

这是一种（非常简单）的方式......

h2 {
    display: table;
}

Answer 2

将标题文本换行到<span>并将背景颜色应用到该范围。

HTML：

<h2><span class="blue">Title</span></h2>

CSS：

.blue{ background-color:blue; }