在每行文本的开头和结尾添加填充
我有一个跨越多行，并具有背景色。 我需要每一行最后都有一个10px的填充。 文本将是dynamic的，所以我需要一个CSS或JS解决scheme，而不是只是用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来find每一行的开始和结束，并添加一个不间断的空间。
有没有人有任何想法如何实现这一目标？ 干杯
我已经在IE8中testing了这个（在IE7中看起来不错）以及Chrome，Firefox，Opera，Safari的最新版本。
现场演示
Chrome的屏幕截图：
它有点傻，说实话，可能比它的价值更复杂 – 基于JS的解决scheme肯定会更容易理解。
这个技术有很多问题 。
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]-->
箱子阴影使它变得容易！
box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000; -moz-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000; -webkit-box-shadow:0.5em 0 0 #000,-0.5em 0 0 #000;
这是一个解决scheme，要求每个单词被包装在一个额外的SPAN元素中：
<h3><span class="heading"><span>THE</span> <span>NEXT</span> <span>GENERATION</span <span>OF</span> <span>CREATIVE</span> <span>TALENT</span></span><br/> <span class="subhead"><span>IT'S</span> <span>RIGHT</span> <span>HERE</span></span></h3>
那么你可以像这样单独devise单词的样式：
h3 span { display: inline-block; } h3 > span > span { padding: 0 0.25em; margin: 0 -0.25em 0 0; } h3 .heading span { background-color: #000; color: #00a3d0; } h3 .subhead span { background-color: #00a3d0; color: #000; }
你可以做这样的事情。 把它包在一个<p>并设置一个border-left =来填充你想设置的跨度。 关于正确的填充，我不认为会有没有使用JS的解决scheme。 顺便说一句，我还在寻找其他的技巧
http://www.jsfiddle.net/steweb/cYZPK/
编辑更新开始从您的标记/的CSS http://www.jsfiddle.net/steweb/cYZPK/1/
编辑2 （使用JS..mootools） http://www.jsfiddle.net/steweb/Nn9Px/ （刚刚在Firefox上testing…需要在其他浏览器上testing..解释asap :)）
为什么不只是添加padding-right:10px; 到容器？
即使不是100％遵循你的devise理念，我认为这是唯一的解决scheme，如果你想坚持与CSS。
h3 span { /* cross browser inline-block */ display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; padding:0 10px; }
inline-block属性将使你的元素基于它的内容大小展开，所以它的行为就像是一个内联元素，但是也有block属性让你应用填充。
希望有所帮助
这是一个没有额外标记的方法 – 虽然它确实需要一个图像。 http://codepen.io/DeptofJeffAyer/pen/FiyIb
我强烈推荐使用Split Lines JS： https ： //github.com/jeremyharris/split_lines
标签的问题在于它从头到尾包装着“内联”的含义。 所以如果你有一个固定的宽度，你的跨度自动进入第二行，那行文本将被包装在第一行，并共享跨度。 为了解决这个问题，你需要分别跨越每行文本。 例如：
<span>line one</span> <span>line two</span>
这不是一个简单的select，如果你想分开跨度的文本是自动生成的Wordpress或类似的…为了解决这个问题，使用上面的JQuery脚本。
〜
绕过它的另一种方式（尽pipe可能不是理想的）是简单地添加显示：块; 给你跨越css课堂：
span { display: block; background-color: #333; color: #fff; }
这将跨越整个块类似于一个button。
希望这可以帮助。
