将名称列表截断为两行答案

【问题标题】：Truncate a list of names in two lines将名称列表截断为两行
【发布时间】：2023-03-07 00:39:01
【问题描述】：

我想显示来自我的反应组件中的数组的逗号分隔名称列表。呈现的 html 看起来像：

<div>
<span>Liza</span>, <span>Eric</span>, <span>Michael</span>, <span>Natalie</span>, <span>Stephan</span>
<a href="#" className="show-more hidden">and {remaining} more...</a>
</div>

但是，此列表最多需要显示 2 行内容。如果列表超过 2 行，我需要显示隐藏的剩余名称的数量：

丽莎，埃里克，

迈克尔 - 还有另外 2 个...-

列表还必须是响应式的（如果我要截断，则只显示“X more”），并且我需要在最后显示的名称末尾截断列表，以便“and X more”文本适合 2 行。

谁能推荐我应该采取的方法来解决这个问题？我相信纯 CSS 解决方案可能由于截断而无法工作。

谢谢！

PD 我想要实现的截图：

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

我想有（接近）纯 CSS 解决方案。但是通过 react 你会是这样的：

在不截断的情况下呈现您的名称列表，设置 visibility/opacity 以隐藏元素
将ref 回调附加到每个项目：<span ref={item => this.items.push(item)}
在componentDidMount() 中迭代this.items 并总结项目的宽度（item1.width + item2.width ...）
当宽度总和大于列表容器的宽度时，您就知道必须截断剩余的项目。
现在您可以使用内部状态或其他任何东西来重新呈现带有截断的列表 (this.setState({truncate: true, remainingItemCount: x})
render 函数可以使用此状态来确定如何使用截断正确呈现列表（您现在也可以将 visibility 设置为正常）

https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

【讨论】：