Javascript 仅使用CSS实现查看更多/更少 {this.state.list.map( （项目）=>{ 返回( {item} )}) 奇普迪夫先生{ 柔性包装：包装； }

我使用flex wrap来显示芯片。如果芯片超过两行，我希望有一个查看更多/查看更少按钮。如何仅使用css来实现这一点？

仅举一个例子：

    <div className={classes.chipDiv}>
       {this.state.list.map(
                (item) => {
      return (
              <div className={classes.chip}>
              <Chip>
               {item}
              </Chip>
              </div>
           )})
     </div>


.chipDiv {
flex-wrap:wrap;
}

在上面的示例中，您可以根据需要切换类

viewMore

，也可以使用

chipDiv

的悬停状态来不使用任何javascript

.chipDiv {
  flex-wrap:wrap;
  display:flex;
  max-height:28px;/*Use According to need of your font-size*/
  overflow:hidden;
}
.chipDiv.viewMore{
   max-height:none;
}

---

请在代码段中添加带有css的工作链接代码

.chipDiv:hover{
   max-height:none;
 }