Alternate text color for each paragraph line

Question

I am trying to change the color of text on alternate paragraph lines. The problem is that the number of lines in a paragraph will depend on things like screen size. Is there a way in CSS where I can have alternate text colors for each line inside a tag <p>?

For example, in the following code

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas. Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>

Each line of text should be an alternative color , regardless of what words are actually on the lines (which, obviously, will depend on the size of the screen).

My first instinct was to try to calculate the number of lines based on the screen size, but then I'm not sure where to go from there.

Answer 1

! CSS webkit-background-clip .

https://jsfiddle.net/kavot054/, HTML CSS .

line-height ; , , .

, webkit-background-clip webkit, , .

p {
  line-height: 30px;
  background: -webkit-repeating-linear-gradient(red, red 30px, blue 30px, blue 60px);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas.
  Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>