html - 在每行文本的开头和结尾添加填充

Question

我有一个跨越多行并具有背景颜色的跨度。我需要每一行在末尾有一个 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 来查找每行的开头和结尾并添加一个不间断的空格。

有没有人知道如何实现这一点？干杯

Answer 1

我已经在 IE8(在 IE7 中看起来还不错)和最新版本的 Chrome、Firefox、Opera、Safari 中对此进行了测试。

Live Demo

来自 Chrome 的屏幕截图:

它有点傻，老实说，可能比它的值(value)更复杂——基于 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]-->