如何使文本溢出：省略号在 react.js + tailwind css 中的文本区域上工作

问：

我遇到了文本溢出的问题：省略号在我的项目中无法正常工作，同时在带有文本内容包装的组件上使用顺风截断。文本溢出是隐藏的，但不显示 3 个点。<textarea/>

下面是一个简化的代码片段：

<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>

组件代码：

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

我尝试了不同的显示，例如替代顺风截断display : inline, inline-block, block, flexoverflow: hidden; text-overflow: ellipsis; white-space: nowrap;