Highlight wrapped first line in textarea using CSS-CodePudding

I have an textarea element that contains a list of strings. I've written some CSS to highlight the first string (line).

However, this doesn't work well when a long word appears that wraps to a new line:

#example:first-line {
    background-color: #BA2F00; /* BazFoo */
    color: #F00BA2; /* FooBaz */
}
textarea #example {
    word-wrap: break-word;
}

<textarea id="example" style="width: 200px; height: 100px;">
ThisIsALoooooooooooooooooooooongWord
</textarea>

The question is, how do I highlight the entire wrapping first line (i.e. ThisIsALooo...ongWord) using CSS?

CodePudding user response：

unfortunately, there's no pseudo attribute for first word... you may have to use Javascript to accomplish this. CSS to select/style first word To do this with Javascript, think about the whole text inside the text area as an array of words, and take the index 0, add a span with a style.

CodePudding user response：

take out the first-line in #example:first-line, just leave it as #example

oh yah and also add the word-wrap:break-word in the # example, it's easier like that.