截断两行

Question

我想显示一个以逗号分隔的名称列表，这些名称来自我的react组件中的数组。渲染的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行，我需要显示隐藏的其余名称的数量：

  

Liza，Eric，

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

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

有人可以推荐一种方法来解决这个问题吗？我相信纯CSS解决方案可能因为截断而无效。

谢谢！

PD我想要实现的截图：

Answer 1

我猜有（接近）纯CSS解决方案。但有了反应，你就会这样：

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

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