CODEWITHSUNDEEP
htmlcsslines
Paweł Tokarz
Paweł Tokarz

Reputation: 326

css selecting single lines of text - giving them different color

people,

I have some text in the paragraph:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet nulla tellus. Suspendisse sed viverra turpis. Duis mollis, dolor vitae aliquam interdum, mauris mi ornare diam</p>

It will be displayed inside of the div of unpredictable width but known height, so there will be a few lines of text. The rest of the text will be cut (by simple overflow:hidden).

The problem is, that I need to give every line of the rendered text different colour. How can be this acheived with CSS3/HTML5?

I was thinking about CSS counters, but their values can not be used as parameters (outside of the "content" property) thought it would be handful here.

I think I need something like pseudo-class like first-line but with posibility to get nth-line.

I know that this can be done by JS in a few lines of code, but I can't use it there.

Thanks for help!

Upvotes: 0

Views: 304

Answers (2)

Leaf
Leaf

Reputation: 602

I tried being clever with pseudo tags, but it didn't turn out as expected. Maybe if you can somehow get the :before and :after text segments to align with the original, it'd work.

FIDDLE

#container p:before {
color: red;
display:inline !important;
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.                                  Suspendisse sed viverra turpis.                                                                 ";
}
#container p {
color:white;
font-family:monospace;
}
#container p:after {
color: green;
content: "                                                         Phasellus sit amet nulla tellus.                                 Duis mollis, dolor vitae aliquam interdum, mauris mi ornare diam";
}

Otherwise, I really don't think it's possible without javascript.

Upvotes: 0

Andy
Andy

Reputation: 4097

Unfortunately, it is not possible with pure CSS.

I figured out a way to achieve your requirement with multiple <p>-Tags:
http://jsfiddle.net/QM52C/1/

But with one single <p>-Tag, it's simply not possible to the current date.

Upvotes: 2

Related Questions