如何在 html 和 js 中用多种颜色为包装线着色？

Question

我在中有这个 div 元素我想为每条换行设置不同的颜色。

与cl.style.display = "inline"; Reacts = cl.getClientRects(); 我能够获取每一行的顶部、左侧、右侧和底部

然后我尝试使用

设置颜色

background: linear-gradient(...); and box-shadow:..;

到目前为止没有任何成功。

如果能提供一点帮助，我们将不胜感激。

.cl {
    width: 500px;
    height: fit-content;
    min-height: 18px;
    position: relative;
    overflow: hidden;

    display: inline-block;
    padding: 2px;
    white-space: pre-wrap;
    word-break: break-word;
}

<div class="cl">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

[我想要什么]

image: https://i.stack.imgur.com/w2WRY.png

Answer 1

这样应该可以达到你想要的效果repeating-linear-gradient我在css里定义了一个变量，为了简单起见，如果你嫌麻烦，你可以直接写

*我没有应用你想要的css，但我认为你很容易实现:)

div {
  --spacing: 2em;
  line-height: var(--spacing);
  background-image: repeating-linear-gradient(red 0 var(--spacing), green var(--spacing) calc(var(--spacing) * 2), blue var(--spacing) calc(var(--spacing) * 3), transparent var(--spacing) calc(var(--spacing) * 4));
}

<div>Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a
  wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate,
  on 2 June 2021 for .8 billion.[12]</div>

如何在 html 和 js 中用多种颜色为包装线着色？

How to color wrapped lines with multiple color in html and js?

html

javascript

css

inline