仅使用 CSS 实现查看更多/更少

【问题标题】：Implement View more/less using only CSS仅使用 CSS 实现查看更多/更少
【发布时间】：2018-12-30 19:14:36
【问题描述】：

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


.chipDiv {
flex-wrap:wrap;
}

我给了 flex-wrap 来展示筹码。如果筹码超过两行，我想要一个查看更多/查看更少按钮。如何仅使用 css 来实现这一点？

【问题讨论】：

请在 sn-p 中添加带有 css 的 workink 代码

标签： javascript css reactjs flexbox

【解决方案1】：

只是一个例子：

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

在上面的示例中，您可以根据需要切换您的班级viewMore。或者您可以使用 chipDiv 的悬停状态而不使用任何 javascript。

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

【讨论】：