Highlight wrapped first line in textarea using CSS

Question

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?

Do you have control of the HTML? And/or can you add some Javascript? — A Haworth, Feb 02 '22 at 17:10
It's not possible with CSS. Because when a word breaks, the browser put the overflow on newlines. — ruleboy21, Feb 02 '22 at 17:26

Daniele Longo · Answer 1 · 2022-02-02T17:53:21.463

0

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.

edited Feb 02 '22 at 17:53

answered Feb 02 '22 at 17:47

Daniele Longo

1
2

https://bobbyhadz.com/blog/javascript-get-first-word-of-string – Daniele Longo Feb 02 '22 at 17:55

score -1 · Answer 2 · edited Feb 02 '22 at 17:33

-1

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.

edited Feb 02 '22 at 17:33

Dharman

30,962
25
85
135

answered Feb 02 '22 at 17:28

thatRandomGuy

1
4

1

This highlights the whole textarea, not what I meant. – Ad Hominem Feb 02 '22 at 17:34
ooh, i guess u would have to use javascript or jquery – thatRandomGuy Feb 02 '22 at 18:00

Highlight wrapped first line in textarea using CSS

2 Answers2