Javascript 显示更多在react中显示较少的文本

我有各种各样的文本，每一个都有不同的长度，我只想用show more和show less按钮显示3行。 我看到了json的例子，但这只是一段文字，我不知道三行中有多少个单词。 npm显示更多安装是不可能的

export type AppState = {
    itemsToShow:number,
    expanded: Boolean
}

state: AppState = {
        itemsToShow:3,
        expanded: false
    }

showMore=(ticketContent:string)=> {
    this.state.itemsToShow === 3 ? (
      this.setState({ itemsToShow: ticketContent.length, expanded: true })
    ) : (
      this.setState({ itemsToShow: 3, expanded: false })
    )};

<div className='content'>{ticket.content.toLocaleString()}</div>
                <div className='content' onClick={()=>this.showMore(ticket.content.toLocaleString())}>
                    {this.state.expanded ? (
                 <span>Show less</span>
                 ) : (
                  <span>Show more</span>
                    )}
                 </div>

导出类型AppState={
itemsToShow:编号，
扩展：布尔值
}
状态：AppState={
项目显示：3，
扩展：false
}
showMore=（ticketContent:string）=>{
this.state.itemsToShow==3(
this.setState（{itemsToShow:ticketContent.length，expanded:true}）
) : (
this.setState（{itemsToShow:3，expanded:false}）
)};
{ticket.content.toLocaleString（）}
this.showMore（ticket.content.tolocalString（））}>
{this.state.expanded(
少展示
) : (
显示更多
)}

---

当然，我试图纠正一些不起作用的地方，我正在寻找改进的方法。

另一种解决方案是在内容元素未展开时，将line-clamp css属性作为单独的类添加到内容元素中