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

有关CSS的问题。

我将收到类似This is a sentence的句子，并且我将自动将其拆分为有关父容器宽度的新行。因此，例如，我将拥有
This isa 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>

最佳答案

如果没有后端工作，那就根本不可能-您需要固定宽度的包装元件。

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

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>

关于html - 自动换行多行文本，高亮行之间有空格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45837762/