CODEWITHSUNDEEP
javascripthtmlcssangulartypescript
Nikhil Kumar vats
Nikhil Kumar vats

Reputation: 85

text-overflow property custom style

Application is built on angular. In a component, there is a div inside which there is a text. <div>abcdefghijklmnop<div>

Based on the screen size, it should show completely or it should clipped. For this I have found that there is a property 'text-overflow', which clipped the text like abcde.... But the requirement is we have to clip the text in other way,

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

So it should look like abc...nop. How can we achieve this? Browser is chrome.

Upvotes: 2

Views: 238

Answers (1)

coder
coder

Reputation: 8712

You could use a attribute directive like bellow to do this. For more details please refer Angular DOC

Please Note: You could improve this directive as you wish. This directive is only giving you the basis to implement that feature.

Directive:

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

Upvotes: 3

Related Questions