angular - 如何在 Angular 6中实现内容显示更多和显示更少

Question

我们有 6 个内容分区。我们还使用字符限制每个 div。我们使用 Bootstrap 4 Angular 6 版本。

6 div some toggle div content opened and some closed如何实现这个案例。

Answer 1

使用一些自定义 CSS 可以很容易地实现。尝试一下:

模板:

<div class="container" [class.show]="show">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<button (click)="show = !show">{{ show ? 'Show less': 'Show More' }}</button>

CSS:

.container {
  font-size: 16px;
  line-height: 16px;
  height: 32px;
  overflow: hidden;
}

.show {
  overflow: visible;
  height: auto;
}

组件:

show = false;

这是一个Sample StackBlitz供您引用。