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>

自动包装多行文本，突出显示的行之间有空格

1 个答案: