CSS文字背景不同势文本行之间的空间

Question

我有一些格式的文本：link to JSFiddle ，我想使它看起来像这样：

如何才能做到这一点？

Answer 1

这..

.news_text{ 
 
    position:relative; 
 
    float:left; 
 
    font-family:Arial, Helvetica, sans-serif; 
 
    font-size:11px; 
 
    width:220px; 
 
    background-color:#866b62; 
 
    color:#FFF; 
 
    padding:3px; 
 

 
    line-height: 1.2em; /*notice line-height*/ 
 
    overflow: hidden; /*to hide extra transform*/ 
 
} 
 
.news_text::before{ 
 
background:repeating-linear-gradient(transparent,transparent calc(1.2em - 1px),white calc(1.2em - 1px),white calc(1.2em + 0px)); /*that same line-height*/ 
 
    background-repeat: repeat-y; 
 
content: ''; 
 
position:absolute; 
 
top:3px; /*same as padding*/ 
 
bottom: 1em; /*use with care when handling padding*/ 
 
left:0; 
 
right: 0; 
 
} 
 
.news_text::after{ 
 
content:'------'; /*'' blank was not working on inline-block*/ 
 
color:transparent; /*to hide '------'*/ 
 
background-color: white; /*same as background*/ 
 
position: relative; 
 
display: inline-block; 
 
transform-origin: top left; 
 
transform:scale(20,2) scaleY(1.1); /*adjust based on your content*/ 
 
}

<span id="news_text" class="news_text"> 
 
    Maecenas tempus rhoncus nisl, eu lorem blandit a consectetuer adipiscing 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur libero nobis, ut itaque, quibusdam, cumque corporis optio dignissimos consequatur voluptatum cum, provident officia 
 
</span>

不知道为什么我花了这么多时间....