在反应中显示更多显示更少文本

Question

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

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>

我试图纠正一些当然它不起作用的东西，我正在寻找如何改进它的想法。

Answer 1

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

https://css-tricks.com/almanac/properties/l/line-clamp/