Question

    <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实现此目标？

Answer 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;
 }

仅使用CSS实现更多/更少的视图

1 个答案: