添加文本填充

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/

Answer 2

.wrap{
    width: 100px;
}

h1{
    display: inline-block;
    white-space: pre-wrap;
    color:#fff;
    padding: 0 10px;
    background: green;
    word-spacing: 100px;
}

小提琴：http://jsfiddle.net/a56kap9L/

Answer 3

你的意思是像这样的线高吗？ http://jsfiddle.net/qayuxsft/

line-height: 2em;

或

line-height: 200%;

将display: inline更改为display: block以使用绿色填充空格。