css文本背景与文本行之间的空间不同

Question

我有一些格式化文本：链接到 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> 

不知道为什么我花了那么多时间在上面......