仅在文本周围的背景颜色

Question

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

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

这是我想要得到的:

我试图通过设置inlineH1 的显示和设置背景颜色来实现这一点,但它似乎不起作用.以下是我的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

演示