how to correctly use dotdotdot for overflow text in angular 5?

Question

I would like to create a directive which apply ... when overflow. I have used dotdotdot jQuery plugin in the past but it doesn't really work in angular 5.

What I have till now is creating a directive called DotdotdotDirective with the selector [appDotdotdot] as shown below:

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

declare var $: any;

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

  constructor(private el: ElementRef) { }

}

The usage is simple:

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

I have also imported the jQuery plugin in case this can be used inside the directive. index.html :

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

I'm expecting that the code should be implemented in the constructor but I don't know how to use it in angular 5 ? Should I use the directive as a wrapper to the jQuery plugin or maybe angular has different solution for this requirement? Thanks in advance!

Answer 1

You can do this only with css. Try this on your sentence div :

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

... will appears if sentence is too long for the container div.