显示更多/显示更少文本，但如果文本没有溢出则隐藏选项（Angular）

Posted 2023-02-22

【中文标题】显示更多/显示更少文本，但如果文本没有溢出则隐藏选项（Angular）

【英文标题】：Show more / show less text, but hide option if text does not overflow (Angular)

【发布时间】：2022-01-19 17:37:37

【问题描述】：

我正在使用动态组件，其中模板中显示的数据是未知的，并且会因情况而异。我有一些嵌套的 mat-expansion-panels，其中需要为之前存储在每个正在加载的扩展面板中的注释显示一个文本字段。

由于文本的长度未知，我想将显示的注释限制为一行，并用省略号标记文本已溢出 - 后跟“显示更多”/“显示更少”按钮。我有显示更多/更少的功能，但我只希望这个按钮在文本超过一行时可见，并在注释时隐藏，即只包含三个单词。

我看到 JQuery 经常被用来解决类似的问题，但由于我使用的是 Angular，JQuery 并不适合。

模板：

<div class="note-field">
   <span class="note">Note: </span>
   <span class="note-text" [class.show]="show"> data.note </span>
</div>
<button class="show-button" (click)="show = !show"> show ? 'Show less': 'Show more' </button>

组件：

show: boolean = false;

CSS：

.note-text 
   font-size: 14px;
   line-height: 14px;
   height: 14px;
   overflow: hidden;
   text-overflow: ellipsis;


.show 
   overflow: visible;
   text-overflow: none;
   height: auto;

这几天我一直在研究这个问题，但我尝试的修复方法之一是添加以下 CSS 规范，但未能成功：

.show-button[overflow=visible] 
   display: none;

省略号在实现溢出功能后也停止工作。

我知道它有些具体，但我确实需要仅在加载的数据超过指定限制时隐藏和显示它的功能。

【参考方案1】：

唯一的方法是创建一个模板引用变量，例如称为content（参见代码中的#content）并“询问” content.scrollHeight

<span #content [class.note-text]="content.scrollHeight>15" 
               [class.show]="show"> data.note </span>
</div>
<button *ngIf="content.scrollHeight>15" class="show-button"
         (click)="show = !show"> show ? 'Show less': 'Show more' </button>

如果 content.scrollHeigth>15，则“span”具有“note-text”类并且按钮可见

fool stackblitz