如何在角度6中实现内容显示更多和显示更少

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

6 div 一些切换 div 内容打开，一些关闭 https://i.stack.imgur.com/dS04r.jpg这个案例如何实现。

使用一些自定义 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;

这是一个示例 StackBlitz https://stackblitz.com/edit/angular-multi-select-eg?file=src%2Fapp%2Fapp.component.ts供您参考。