angular - 如何正确使用 dotdotdot 为 angular 5 中的溢出文本？

Question

我想创建一个指令，该指令适用于......溢出时。
我过去使用过 dotdotdot jQuery 插件，但实际上并没有
以 Angular 5 工作。

到目前为止，我所拥有的是创建一个名为 DotdotdotDirective 的指令
选择器[appDotdotdot]如下图:

import { Directive, ElementRef } from '@angular/core';

declare var $: any;

@Directive({
  selector: '[appDotdotdot]'
})
export class DotdotdotDirective {

  constructor(private el: ElementRef) { }

}

用法很简单:

<h3><a href="#" appDotdotdot>{{data.trip.name}}</a></h3>

我还导入了 jQuery 插件，以防它可以在
指示。索引.html:

<script src="assets/js/jquery.dotdotdot.js"></script>

我期望代码应该在构造函数中实现，但我
不知道如何在 angular 5 中使用它？
我应该使用该指令作为 jQuery 插件的包装器还是
angular 对此要求有不同的解决方案吗？
提前致谢!

Answer 1

你只能用 css 来做到这一点。
在你的句子 div 上试试这个:

 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;

...如果句子对于容器 div 来说太长，则会出现。