相关疑难解决方法(0)

我有一个跨越多行并具有背景颜色的跨度.我需要每条线在末尾都有10px的填充.文本将是动态的,所以我需要一个css或js解决方案,而不仅仅是使用nbsp标签进行黑客攻击(这就是我如何得到如下图所示的示例)

图片展示了我拥有的和我想要的东西之间的区别:

<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来查找每一行的开头和结尾,并添加一个不间断的空格.

有没有人有任何想法如何实现这一目标？干杯

我有一个我想要实现的设计,涉及标题文本以其自己的背景颜色出现,填充10px,在图像上,例如:

http://i.stack.imgur.com/E7EpS.png

这张图中的第一个例子效果很好,很简单:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox span { padding:0 10px; background:#000; position:absolute; left:0; bottom:40px; }

当文本溢出到另一行时出现麻烦,然后span元素填充不会影响换行符上的文本,它呈现如下:

http://i.stack.imgur.com/pY18f.png

任何人都知道一个替代品,或者他们如何设置这个设计,以便背景颜色和填充是一致的？

提前致谢

编辑:我已经简化了代码,使其简洁,但错过了一个重要的部分.实际上它是这样的:

.greenbox {width:520px; height:261px; position:relative;}
.greenbox a {position:absolute; left:0; bottom:40px; }
.greenbox span { padding:0 10px; background:#000; }

用html作为:

<div class="greenbox">

    <a href="link"><span>The Title Goes Here</span></a>

</div>

因此,跨度保持内联,包裹在绝对位置锚中.