Question

我正在尝试显示更多/更少显示按钮。实际版本不是很好，因为我只是在状态为false时切片，而在状态为true时保持不变。现在，我只想显示每张卡的第一行，但我真的不知道如何。


 &.component--blue {
    background: $background-blue;
  }

 &.component--green {
    background: $background-green;
  }

Answer 1

尝试有条件地渲染所需的项目，如下所示：

<CardContent>
{show &&(<Typography
  gutterBottom
  variant="h5"
  component="h2"
  className={classes.textStyling}
  >
    {text}
  </Typography>)}
</CardContent>

然后再加上其他行。尝试有条件地渲染所需的项目，如下所示：

<CardContent>
  <Typography gutterBottom variant="h5" component="h2" className={classes.textStyling}>
    {text}
  </Typography>
  {show && (<div>...</div>)}
</CardContent>

Answer 2

您可以使用CSS实现此目的。只需将line-height设置为所需的值，并将max-height设置为要显示的值的倍数即可。

.singleLine{ // 1 line
    line-height:1.5em;
    max-height:1.5em;
    overflow: hidden;
}
.multiLine{ // 3 lines
    line-height:1.5em;
    max-height:4.5em;
    overflow: hidden;
}

<Typography
      gutterBottom
      variant="h5"
      component="h2"
      className={show ? classes.multiLine : classes.singleLine}
    >

.singleLine{ 
    width: 50px;
    line-height:1.5em;
    max-height:1.5em;
    overflow:hidden;
}
.multiLine{ 
    width: 50px;
    line-height:1.5em;
    max-height:4.5em;
    overflow:hidden;
}

<div>
Single -------------------------
</div>
<div class="singleLine">
dasdasasdasdas dasdasdasdasd sadasd asdasd sadasd sadasd asdasd a
</div>
<div>
Multi -------------------------
</div>
<div class="multiLine">
dasdasasdasdas dasdasdasdasd sadasd asdasd sadasd sadasd asdasd a
</div>

我正在尝试显示更多/更少显示文本按钮

2 个答案: