How to make text-overflow : ellipsis work on textarea in react.js + tailwind css

Question

I have an issue as text-overflow: ellipsis doesnt work corectly in my project while using tailwind truncate on div with component which text content is wraped into <textarea/>. Text overflow is hidden but 3 dots are not shown.

Here is a simplified code snippet:

<div onClick={someFunction} className="relative inline-block max-w-24 h-6 truncate">
    <someComponent
      content={props.content} //this component is a read only textarea
    />
    <div className="absolute left-0 right-0 top-0 bottom-0"></div>
</div>

component code :

<textarea
    className="inline-block text-inherit bg-inherit max-w-full max-h-full"
    defaultValue={props.content}
    readOnly={true}
/>

I tried different display like display : inline, inline-block, block, flex etc. as wel as substitute tailwind truncate with overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

Answer 1

It looks like this is not how a <textarea> wants to behave. This question has also been discussed here: text-overflow: ellipsis not work on TextArea