我有一个跨越多行并具有背景颜色的跨度.我需要每行的最后一个10px的填充.文本将是动态的,所以我需要一个css或js的解决方案,而不是只是黑客它的标签(这是我如何得到下面的例子)
<h3><span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br/>
<span class="subhead">IT'S RIGHT HERE</span></h3>
h3 {
margin:0;
font-size: 42px;}
h3 .heading {
background-color: #000;
color: #00a3d0;}
h3 .subhead {
background-color: #00a3d0;
color: #000;}
我想不出有什么办法用CSS,我正在考虑使用javascript来查找每一行的开始和结束,并添加一个不间断的空间.
有谁有任何想法如何实现这一点？
干杯
解决方法
我已经在IE8中测试过(IE7看起来不太好)和Chrome,Firefox,Opera,Safari的最新版本.
Chrome的屏幕截图：
它有点傻,说实话,可能比它的价值更复杂 – 一个基于JS的解决方案肯定会更容易理解.
这种技术有这么多的疑虑.
CSS：
#titleContainer {
width: 520px
}
h3 {
margin:0;
font-size: 42px;
font-weight: bold;
font-family: sans-serif
}
h3 .heading {
background-color: #000;
color: #00a3d0;
}
h3 .subhead {
background-color: #00a3d0;
color: #000;
}
div {
line-height: 1.1;
padding: 1px 0;
border-left: 30px solid #000;
display: inline-block;
}
h3 {
background-color: #000;
color: #fff;
display: inline;
margin: 0;
padding: 0
}
h3 .indent {
position: relative;
left: -15px;
}
h3 .subhead {
padding: 0 15px;
float: left;
margin: 3px 0 0 -29px;
outline: 1px solid #00a3d0;
line-height: 1.15
}
HTML：
<div id="titleContainer">
<h3><span class="indent">
<span class="heading">THE NEXT GENERATION OF CREATIVE TALENT</span><br /><span class="subhead">IT'S RIGHT HERE</span>
</span></h3>
</div>
<!--[if IE]><style>
h3 .subhead {
margin-left: -14px
}
</style><![endif]-->
