text-overflow 属性自定义样式

Question

应用程序是基于 Angular 构建的。在组件中，有一个 div，其中有一个文本。 <div>abcdefghijklmnop<div>

根据屏幕大小，它应该完全显示或者应该被剪裁。为此，我发现有一个属性'text-overflow'，它像abcde... 一样剪切了文本。但要求是我们必须以其他方式剪辑文本，

<first 3 character>...<last 3 character>

所以它应该看起来像abc...nop。我们怎样才能做到这一点？浏览器是chrome。

Answer 1

您可以使用如下所示的属性指令来执行此操作。更多详情请参考Angular DOC

请注意：您可以根据需要改进此指令。该指令只是为您提供实现该功能的基础。

指令：

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

@Directive({
  selector: '[appClip]'
})
export class ClipDirective implements OnInit {

  constructor(private el: ElementRef) { }

  ngOnInit(): void {
    let text: string = this.el.nativeElement.innerHTML;

    if(text.length > 6) {
      const first3 = text.slice(0, 3);
      const last3 = text.slice(text.length - 3)

      this.el.nativeElement.innerHTML =  `${first3}...${last3}`;
    }
  }

}

HTML：

<div appClip="">abcdefghijklmnop</div>

Working DEMO