自动换行多行文本，高亮行之间有空格

Question

有关CSS的问题。

我将收到如下句子： This is a sentence ，我将自动将其拆分为有关父容器宽度的新行。 因此，例如，我将拥有

This is a sentence

我试图做的实际上可以在此代码示例中看到。 线条突出显示，但线条之间有一定的间隔（白色）。 当设置一些background-color: black我不能创建这样的空间来改变line-height 。 我也尝试过将linear-gradient设置为背景，但这种方式无法实现我想要的方式。

这可以通过将行span标签来完成，但是我想避免其他后端工作。

我错过了任何明显的解决方案还是有些棘手？

 div { width: 200px; } h1 { background-color: red; line-height: 50px; } 

 <div> <h1>Some text and its wrapping</h1> </div> 

Answer 1

如果没有后台工作，那简直是不可能的-你需要固定宽度的包装元素。

但是，您不需要为每行添加额外的元素。 检查一下：

 div { width: 200px; display: block; } h1 { background-color: red; font-size: 36px; font-weight: bold; line-height: 50px; display: inline; } 

 <div> <h1>This is a sentence.</h1> </div> 

或者您使用伪元素：

 div { width: 200px; display: block; } div:after { background-color: red; font-size: 36px; font-weight: bold; line-height: 50px; display: inline; content: attr(data-content); } 

 <div data-content="This is a sentence."></div>