Fatal编程技术网
  • javascript/
  • Javascript 截断两行中的名称列表

Javascript 截断两行中的名称列表

javascript css reactjs

Javascript 截断两行中的名称列表,javascript,css,reactjs,Javascript,Css,Reactjs,我想显示一个逗号分隔的名称列表，这些名称来自react组件中的数组。呈现的html类似于： <div> <span>Liza</span>, <span>Eric</span>, <span>Michael</span>, <span>Natalie</span>, <span>Stephan</span> <a href="#" clas

我想显示一个逗号分隔的名称列表，这些名称来自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行，我需要显示隐藏的剩余名称的数量：

莉莎，埃里克

迈克尔-还有两个-

列表还必须具有响应性（如果我正在截断，则仅显示“X more”），并且我需要截断最后显示的名称末尾的列表，以便“和X more”文本在两行内

有人能推荐一种我应该采取的方法来解决这个问题吗？我相信纯CSS解决方案可能因为截断而无法工作

谢谢

PD我想要实现的目标的屏幕截图：

我想有（接近）纯CSS解决方案。但是，如果使用react，您可能会遇到如下情况：

  • 在不进行任何截断的情况下呈现名称列表，设置
    可见性/不透明度
    以隐藏元素
  • 将
    ref
    回调附加到每个项目：
    this.items.push（项目）}
  • 在
    componentDidMount（）
    中，迭代
    this.items
    并汇总项目的宽度（item1.width+item2.width…）
  • 当宽度之和大于列表容器的宽度时，您知道必须截断剩余的项
  • 现在，您可以使用内部状态或其他任何方式通过截断重新呈现列表（
    this.setState（{truncate:true，remainingItemCount:x}）
  • render函数可以使用此状态确定如何使用截断正确渲染列表（现在还可以将
    可见性设置回正常状态）

    •