行连续文本块

Question

我有一段文字分成4部分。每个部分都应该用自己的颜色突出显示，包括每行末尾的空格和行之间的空格，一直到下一部分。例如：

只有HTML和CSS才有可能吗？请不要JS和SVG。

另外，你能为这个问题建议一个更好的标题吗？

更新：文字应左对齐。

Answer 1

您需要在块元素中组合<p>个标记。在CSS上，您需要证明自己的文本，并为每个元素应用背景。

希望这会有所帮助：）

＆＃13;

＆＃13;

div {
    text-align: justify;
    background: pink;
}

p {
  display: inline;
  margin: 0;
  line-height: 19px;
  font-size: 17px;
}

p:nth-child(1) {
  background: red;
}

p:nth-child(2) {
  background: green;
}

p:nth-child(3) {
  background: blue;
}


p:nth-child(4) {
  background: pink;
}

＆＃13;

<div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque  </p>
<p>laudantium, totam rem aperiam, eaque ipsa quae ab  </p>
<p>illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
<p>Nemo enim ipsam voluptatem </p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用跨度来实现

＆＃13;

＆＃13;

div {
  width: 80%;
  text-align: justify;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.lightblue {
  background-color: lightblue;
}

＆＃13;

<div><span class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, ab repellat eveniet fuga cumque ipsum rerum quam, porro enim nihil in odio dolore dignissimos ipsam laudantium temporibus necessitatibus, ratione distinctio.</span>
  <span
    class="yellow">Quidem id sit, facilis hic maiores, sed fuga consequuntur eveniet nobis magnam praesentium optio reiciendis nesciunt ratione quasi, voluptas, ut iusto exercitationem. Deserunt error voluptate, veniam debitis ex explicabo animi.</span><span class="green">Facere quae odit sunt obcaecati itaque voluptatem esse! Repellendus nesciunt fugit ullam esse, similique ducimus quis distinctio saepe, modi. Repudiandae, id tempora explicabo. Perspiciatis, molestiae, repudiandae. Excepturi placeat doloribus, dignissimos.</span>
    <span
      class="lightblue">Nesciunt saepe possimus, autem molestias repellat maiores quasi ex sit eveniet cupiditate ducimus voluptatibus ipsam necessitatibus, sed fuga impedit aspernatur corporis deleniti optio quaerat! Quaerat quia ipsa voluptatum cumque qui.</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

div {
  font-size: 0; /* prevents whitespace between spans to ruin the result */
  text-align: justify;
}

span {
  background: yellow;
  font-size: 22px; /* reset to the font-size needed here */
  line-height: 1; /* prevents white lines between the text blocks */
}

span+span {
  background: cyan;
}

span+span+span {
  background: lime;
}

span+span+span+span {
  background: orange;
}

<div>
  <span>I have one paragraph of text broken into 4 parts. Each part should be highlighted with its own color, including space at the end of each line and space between lines, all the way to the next part. For example:</span>
  <span>Is it possible with only HTML and CSS? No JS and SVG please.

Also, can you suggest a better title for this question?</span>
  <span>I have one paragraph of text broken into 4 parts. Each part should be highlighted with its own color, including space at the end of each line and space between lines, all the way to the next part. For example:</span>
  <span>Is it possible with only HTML and CSS? No JS and SVG please.

Also, can you suggest a better title for this question?</span>
</div>