添加文本填充

Question

在以下示例中,标题文本位于多行上.是否有可能在每一行上添加左右填充(当然,不将每个单词包装在不同的元素中)？

如果只能用CSS来实现,可以用jQuery完成吗？

HTML:

<div class="wrap">
<h1>Donec commodo sapien lectus, nec gravida magna</h1> 
</div>

CSS:

.wrap{
    width: 100px;
}

h1{
    display:inline;
    background:green;
    color:#fff;
}

演示: http ://jsfiddle.net/289oo48b/

Answer 1

span通过为以下内容添加一个容器（例如）元素h1：

HTML：

<div class="wrap">
    <h1>
        <span>Donec commodo sapien lectus, nec gravida magna</span>
    </h1>
</div>

并使用以下 CSS：

.wrap {
    width: 100px;
    line-height: 1.3;
    padding: 2px 0; 
    border-left: 20px solid green;
    margin: 20px 0;
}

h1 {
    display:inline;
    background:green;
    color:#fff;
    padding: 4px 0;
    margin: 0;
}

span {
    position: relative;
    left: -10px; 
}

JSFiddle： https: //jsfiddle.net/anini/rwLenu6w/