在以下示例中,标题文本位于多行上.是否有可能在每一行上添加左右填充(当然,不将每个单词包装在不同的元素中)？
如果只有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;
}
解决方法
通过为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/
