在下面的示例中,标题文本分几行。是否有可能在每一行上添加左右填充(当然,不用将每个单词包装在不同的元素中)?
如果只用 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/
最佳答案
通过为 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/
关于jquery - 为文本添加填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30070263/