Question

我有各种文本，每个文本都有不同的长度，我只想显示3行，并显示“更多”和“更少”按钮。我在json上看到了示例，但这只是一段文字，我不知道3行中有多少个单词。 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>

我试图纠正一些行不通的方法，我正在寻找改善方法的想法。

Answer 1

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

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

显示更多显示较少的文本

1 个答案: