是否可以在换行前添加填充?就像在这里一样
对此
.
当前的CSS代码:
span.highlight { background: #0058be; color: #FFF; padding: 2px 5px; }
Run Code Online (Sandbox Code Playgroud) 我有一个跨越多行并具有背景颜色的跨度.我需要每条线在末尾都有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;}
Run Code Online (Sandbox Code Playgroud)
我想不出用css做任何方法,我正在考虑使用javascript来查找每一行的开头和结尾,并添加一个不间断的空格.
有没有人有任何想法如何实现这一目标?干杯
我得到了一个与这个小提琴相关的CSS问题:http ://jsfiddle.net/r584e/
这里有相关的截图

有时我必须以这种方式设置内联元素的样式,试图几乎避免行之间的空间并仅在文本下应用背景.如您所见,第一段内部有一个链接,我在其中设置line-height: 1em.右边的段落改为a line-height: 0.8em;.(注意:我知道这样我可以粗略地剪切一些字母 - 比如q,g,p,......但是文字是大写的,所以这不是一个真正的问题)
在第二段中,行实际上更接近(如我所愿)但不幸的是每一行也与前一行部分重叠(除非你删除了应用的背景颜色)并且这不好(例如,请参阅底部的"大写"字样) ,所以这里我的问题:
随意更改CSS和/或标记.我正在寻找一个纯CSS的解决方法.
最佳解决方案应该适用于现代浏览器,如果可能的话,至少应该使用IE8 +
先感谢您.=)
编辑:
关于第二个问题,使用@thirtydot解决方案我可以使用white-space: pre-wrapspan元素上的应用添加空间(右侧)