jquery - 为文本添加填充

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

通过为 h1 的内容添加一个容器(例如 span)元素:

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/