text-overflow: ellipsis not work on TextArea

Question

I am using <textarea> to show multiple lines. And I want to use "white-space:nowrap" and "text-overflow: ellipsis" to constrain each line to be shown in one line with "..." at the end. Below is the css styles I set but the "ellipsis" is not working.

    display: block;
    width:400px;
    height:20px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

Is there a way to do that for tag?

Answer 1

The only way I found which works is to have a div showing for the ellipses, then on focus switch to a textarea (they are overlaying each other). You can do something with pure CSS:

<TEXTAREA>
<DIV>

DIV should sit on top (absolute) with pointer-events: none.

TEXTAREA has opacity: 0.

When you have :focus hide the DIV (~ sibling) and change the TEXTAREA opacity to 1. You might find :focus-within pseudo selector to be handy too depending on your use case.