如何正确使用dotdotdot的角度5溢出文本？

Question

我想创建一个适用于溢出时的指令。我过去曾经使用过dotdotdot jQuery插件，但是在angular 5中它并没有真正起作用。

到目前为止，我正在使用选择器[appDotdotdot]创建一个名为DotdotdotDirective的指令，如下所示：

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插件，以防可以在指令中使用。index.html：

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

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

Answer 1

解决方案1：

{{ (myString.length > 10) ? (myString | slice:0:10) + '...' : myString }}

解决方案2：

@Pipe({
    name: 'dotdotdot'
})

export class DotDotDotPipe implements PipeTransform {

    transform(value: string, limit: number): string {
        return value.length > limit ? value.substring(0, limit) + '...' : value;
    }
}

用法：

{{ myString | dotdotdot:10 }}

Answer 2

您只能使用CSS执行此操作。在句子div上尝试一下：

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

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