html - 仅文本周围的背景颜色

Question

由于 div 的固定宽度，我在超过 1 行的 div 中有一个 H1。我只想将背景颜色设置为 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