如何在角度 6 中实现内容显示更多和显示更少 [英] How will achive content show more and show less in angular 6

问题描述

我们有 6 个内容 div.我们还使用字符限制每个 div.我们使用了 bootstrap 4 angular 6 版本.

6 div 一些切换 div 内容打开，一些关闭如何解决这个问题.

解决方案

使用一些自定义 css 很容易实现.试试这个:

模板:

Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近随着桌面出版软件 Aldus PageMaker 的发布，包括 Lorem Ipsum 的版本.
<button (click)="show = !show">{{ show ?'显示更少':'显示更多' }}</button>

CSS:

.container {字体大小:16px；行高:16px；高度:32px；溢出:隐藏；}.展示 {溢出:可见；高度:自动；}

组件:

show = false;

这是一个示例StackBlitz 供您参考.

We have 6 content div. And also we using character limit each div. We used bootstrap 4 angular 6 version.

6 div some toggle div content opened and some closed How to achive this case.

解决方案

It's very easy to implement with some custom css. Give this a try:

Template:

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

Component:

show = false;

Here's a Sample StackBlitz for your ref.

这篇关于如何在角度 6 中实现内容显示更多和显示更少的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！