Html Question posted in
Some basic documentation can be found here.

Html – How to Detect Ellipsis in Angular

in my HTML code, I have a <p> tag with a maximum width set using the maxWidthProductId input in my component. If the text within this

tag exceeds the maximum width, ellipsis (…) will be applied. However, I’m facing difficulty detecting whether text-overflow: ellipsis is active because I don’t have any scrollbars in my element, so the method (element.clientWidth < element.scrollWidth) doesn’t work for me. Here is my HTML and CSS code:

  <p class="productId__text" #test [style.max-width]="maxWidthProductId" >{{ productId }}</p>
       <span *ngIf="this.isTextOverflow ===true" class="tooltip" #tooltip>{{ productId }}<br /></span>
  .productId__text{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width:300px;
    margin: 0;
  }

Is there another solution ?

Tags:

2

Answers


  1. 0

    See that, as "test" is the template refrence, in the .html is the own HTMLelement.

    <span *ngIf="test.offsetWidth<test.scrollWidth">I'm ellipsied"</span>
    Login or Signup to reply.
  2. 0

    If you are not using scrollbars and want to detect whether text-overflow: ellipsis is active, you can use a combination of JavaScript and DOM manipulation to check the overflow condition. One approach is to compare the clientWidth with the scrollWidth. However, since you mentioned that this method doesn’t work for you, you can consider an alternative approach using the getComputedStyle method.

    Here’s how you can achieve it:

    First, add a reference variable to your <p> tag in the template:

    <p #productIdText [style.max-width]="maxWidthProductId">{{ productId }}</p>
<span *ngIf="isTextOverflow" class="tooltip" #tooltip>{{ productId }}<br /></span>

    In your component, use ViewChild to get a reference to the <p> element and check the computed style to determine if text-overflow: ellipsis is applied:

    import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('productIdText', { static: false }) productIdText: ElementRef;
  @ViewChild('tooltip', { static: false }) tooltip: ElementRef;

  productId: string = "Your Product ID"; // Set your product ID here
  maxWidthProductId: string = "300px"; // Set your max-width here
  isTextOverflow: boolean = false;

  ngAfterViewInit() {
    this.checkTextOverflow();
  }

  checkTextOverflow() {
    const element = this.productIdText.nativeElement;

    const isTextOverflow =
      element.scrollWidth > element.clientWidth ||
      window.getComputedStyle(element).getPropertyValue('overflow') === 'hidden';

    this.isTextOverflow = isTextOverflow;

    // If there is text overflow, you can show the tooltip
    if (isTextOverflow) {
      const tooltipElement = this.tooltip.nativeElement;
      tooltipElement.textContent = this.productId;
    }
  }
}

    This way, the checkTextOverflow method will be called after the view has been initialized, and it will determine whether text-overflow: ellipsis is active by comparing the scrollWidth and clientWidth or checking the computed style. If there is text overflow, you can display the tooltip accordingly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search