Tengo este elemento div en el que quiero establecer un color diferente para cada línea envuelta.
Con cl.style.display = "inline"; Reacts = cl.getClientRects(); Puedo obtener la parte superior, izquierda, derecha e inferior de cada línea
Luego traté de establecer colores usando
background: linear-gradient(...); and box-shadow:..;hasta ahora sin ningún éxito.
Un poco de ayuda sería realmente apreciada.
.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>[lo que quiero]
image: https://i.stack.imgur.com/w2WRY.pngEsto debería lograr el efecto que desea al usar el repeating-linear-gradient Defino una variable en css para que sea simple, pero si lo confunde, puede escribirlo directamente.
*No aplico el css que quieres, pero creo que es muy fácil de lograr para ti :)
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 $1.8 billion.[12]</div>