Angular directive to simulate "text-overflow: ellipsis" on an SVG text node

svg-ellipsis.directive.ts

/**
 * @see https://stackoverflow.com/questions/15975440/add-ellipses-to-overflowing-text-in-svg
 * @example
 * <!-- truncate at 200px -->
 * <svg><svg:text ellipsis [text]="text to truncate" [width]="200"></svg:text></svg>
 */

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

const ELLIPSIS = '\u2026';

@Directive({selector: 'svg text[ellipsis]'})
export class SVGEllipsisDirective implements OnInit {
  @Input() text: string;

  @Input() width: number;

  constructor (private _el: ElementRef) {
  }

  ngOnInit (): void {
    this._textEllipsis(this._el.nativeElement);
  }

  private _textEllipsis (el: SVGTextContentElement) {
    let text = this.text;
    const width = this.width;
    if (typeof el.getSubStringLength !== 'undefined') {
      el.textContent = text;
      let len = text.length;
      if (el.getSubStringLength(0, len) > width) {
        while (el.getSubStringLength(0, len--) > width) {
        }
        el.textContent = text.slice(0, len) + ELLIPSIS;
      }
    } else if (typeof el.getComputedTextLength !== 'undefined') {
      while (el.getComputedTextLength() > width) {
        text = text.slice(0, -1);
        el.textContent = `${text}${ELLIPSIS}`;
      }
    } else {
      // the last fallback
      while (el.getBBox().width > width) {
        text = text.slice(0, -1);
        // we need to update the textContent to update the boundary width
        el.textContent = `${text}${ELLIPSIS}`;
      }
    }
  }
}

Hi, I implemented your solution. I cannot figure out the below error message I am getting here. Can you please check kindly and help me out here if possible.

ERROR DOMException: Failed to execute 'getSubStringLength' on 'SVGTextContentElement': The charnum provided (0) is greater than or equal to the maximum bound (0).
at SVGEllipsisDirective._textEllipsis (webpack-internal:///./src/app/svgellipsis-directive.directive.ts:28:20)
at SVGEllipsisDirective.ngOnInit (webpack-internal:///./src/app/svgellipsis-directive.directive.ts:20:14)
at checkAndUpdateDirectiveInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:12627:19)
at checkAndUpdateNodeInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14151:20)
at checkAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14094:16)
at debugCheckAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14987:76)
at debugCheckDirectivesFn (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14928:13)
at Object.eval [as updateDirectives] (ng:///AppModule/AppComponent.ngfactory.js:81:5)
at Object.debugUpdateDirectives [as updateDirectives] (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14913:21)
at checkAndUpdateView (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14060:14)

Hi, any update on the above mentioned error please? @boneskull

Anyway solved it myself, but your directive is very helpful, thanks a bunch...

to show tooltip add this code in the end of _textEllipsis() function :

    const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title');
    titleEl.textContent = this.text;
    el.appendChild(titleEl);

No idea, haven’t played with Angular for years, sorry