仅在文本周围的背景颜色

Question

由于div的固定宽度，我在div中有一个H1超过1行。我想将背景颜色仅设置为H1文本，以便背景仅保留在文本后面（例如，如果行的末尾有空白空间，则不应使用背景颜色）。

，我需要设置左右填充文本。我试图将填充设置为标题但它也不起作用。

这是我想要的：

我试图通过设置H1的inline显示和设置背景颜色来实现这一点，但它似乎不起作用。以下是我的HTML和CSS以及演示。

HTML：

<div class="box">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget massa felis, at aliquam libero. </h1>

CSS：

.box{
    background: green;
    overflow: hidden;
    max-width: 100px;
    margin: 50px auto;
    padding: 20px;
}

h1{   
    background: yellow;
    font-size: 30px;   
    float: left;
    display: inline;   
}

演示：http://jsfiddle.net/BQMXa/

Answer 1

删除float:left

中的 h1

的 Demo 的

Answer 2

float: left不是必需的。删除它。

此外，您可能希望减少line-height，因此它看起来像演示（如果您不这样做，您将在文本下面留下空白行，这可能是无法忍受的。）