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