Here's a handy JavaScript function that you can use with a span element as an argument:

function checkEllipsis(e) {
     return (e.offsetWidth < e.scrollWidth);
}

Expanding on italo's response, you have the option to achieve this functionality with jQuery.

function checkEllipsis($element) {
    return ($element.width() < $element[0].scrollWidth);
}

In addition, as noted by Smoky, consider utilizing jQuery's outerWidth() instead of width().

function checkEllipsis($element) {
    return ($element.outerWidth() < $element[0].scrollWidth);
}

Great answer from italo with some valuable insights! However, I would like to add a little refinement:

function checkEllipsisActive(element) {
   var margin = 3; // Adjust based on font and browser differences
   return element.offsetWidth + margin < element.scrollWidth;
}

Ensuring Compatibility Across Different Browsers

If you test the code above and use console.log to view the values of element.offsetWidth and element.scrollWidth, you may observe slight variations in Internet Explorer even when there is no text truncation, typically off by 1 or 2 pixels.

To accommodate these nuances in font rendering and browser behavior, it's advisable to allow for a certain tolerance!

Code Implementation

const elements = Array.from(document.querySelectorAll('.element'));
elements.forEach(element => {
    element.style.color = checkEllipsis(element) ? 'red' : 'black';
})

function checkEllipsis(el){
  const styles = getComputedStyle(el);
  const widthEl = parseFloat(styles.width);
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.font = `${styles.fontSize} ${styles.fontFamily}`;
  const text = ctx.measureText(el.innerText);
  return text.width > widthEl;
}

.element{
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

      <div class="element">Short</div>
      <div class="element">Loooooooooooong</div>

This code snippet demonstrates how to display a tooltip on a cell within a table with truncated text, adjusting dynamically based on the width of the table:

$.expr[':'].truncated = function (obj) {
    var element = $(obj);

    return (element[0].scrollHeight > (element.innerHeight() + 1)) || (element[0].scrollWidth > (element.innerWidth() + 1));
};

$(document).ready(function () {
    $("td").mouseenter(function () {
        var cella = $(this);
        var isTruncated = cella.filter(":truncated").length > 0;
        if (isTruncated) 
            cella.attr("title", cella.text());
        else 
            cella.attr("title", null);
    });
});

Check out the demo here: https://jsfiddle.net/t4qs3tqs/

This functionality is compatible with all versions of jQuery.

None of the solutions I tried seemed to work for my specific situation. What ended up being successful was comparing the scrollWidth of an element to that of its parent (or child, depending on which one is triggering the behavior).

If the child element's scrollWidth surpasses that of its parent, it indicates that .text-ellipsis is active.

When el serves as the parent element

function isEllipsisActive(el) {
    let width       = el.offsetWidth;
    let widthChild  = el.firstChild.offsetWidth;
    return (widthChild >= width);
}

When el is acting as the child element

function isEllipsisActive(event) {
    let width       = el.offsetWidth;
    let widthParent = el.parentElement.scrollWidth;
    return (width >= widthParent);
}

Comparing elem.offsetWdith to ele.scrollWidth I found a solution that works perfectly for me! Check out my code snippet on this JSFiddle link

$(function() {
  $('.endtext').each(function(index, elem) {
    debugger;
    if(elem.offsetWidth !== elem.scrollWidth){
      $(this).css({color: '#FF0000'})
    }
  });
});

Expanding on @Дмытрык's response, it is important to remember to take into account borders and paddings for the code to work effectively!

const items = Array.from(document.querySelectorAll('.item'));
items.forEach(item =>{
    item.style.color = checkEllipsis(item) ? 'red': 'black'
})

function checkEllipsis(el){
  const styles = getComputedStyle(el);
  const widthEl = parseFloat(styles.width);
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.font = `${styles.fontSize} ${styles.fontFamily}`;
  const text = ctx.measureText(el.innerText);

  let extra = 0;
  extra += parseFloat(styles.getPropertyValue('border-left-width'));
  extra += parseFloat(styles.getPropertyValue('border-right-width'));
  extra += parseFloat(styles.getPropertyValue('padding-left'));
  extra += parseFloat(styles.getPropertyValue('padding-right'));
  return text.width > (widthEl - extra);
}

.item{
  width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}

      <div class="item">Short</div>
      <div class="item">Loooooooooooong</div>

There seems to be a slight pixel discrepancy with the previously mentioned solutions when comparing offsetWidth > scrollWidth.

The W3C has an older API that rounds off the element.scrollWidth value, leading to incorrect comparisons in certain cases. For example, if the element's width is 150px and the scrollWidth is 150.4px (rounded to 150), the comparison will erroneously return false, even if the browser displays ellipsis in the text.

Efforts were made to update APIs that return fractional pixels, but these changes were rolled back due to compatibility issues with existing web content.

A workaround involves using max-content and getClientRects(). Here's a sample code snippet that I have used onMouseEnter. Please note that this workaround only functions correctly if the container spans 100% of the available width (for instance, if you are utilizing flexbox, ensure your container is set to flex: 1).

hasEllipsis(elementItem) {
    let scrollWidth = elementItem.scrollWidth;
    
    elementItem.style.width = 'max-content';
    const itemRects = elementItem.getClientRects();

    if (itemRects.length > 0 && itemRects[0].width > scrollWidth) {
        scrollWidth = itemRects[0].width;
    }

    elementItem.style.width = 'auto';
    return scrollWidth > elementItem.clientWidth;
}

Related Articles:

https://bugs.chromium.org/p/chromium/issues/detail?id=980476

https://github.com/w3c/csswg-drafts/issues/4123

When the scrollHeight is greater than the clientHeight, it indicates that there is a truncation occurring:

https://i.sstatic.net/jqcYL.png

Resizable Example:

const detectTextTruncation = node => node.scrollHeight > node.clientHeight
const applyTruncationClass = node => node.classList.toggle('truncated', detectTextTruncation(node))

// Resize observer for DOM elements
const resizeObserver = new ResizeObserver(entries => applyTruncationClass(entries[0].target))
resizeObserver.observe(document.querySelector('p'), { attributes: true })

p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  
  width: 300px;
  resize: horizontal;
  overflow: hidden;
}

/* Custom style for detecting truncation 
 ***************************************/
body:has(.truncated)::after {
  content: 'Truncated';
  font: 24px Arial;
  background: red;
  color: white;
  padding: 8px;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

<p>
  <b>Resize this text block:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
  nisi ut aliquip ex ea commodo consequat.
</p>

👉 Check out my customizable example on CodePen

In my opinion, a more effective way to detect it would be to utilize the getClientRects() method; each rectangle seems to have the same height, allowing us to determine the number of lines by counting the different top values.

The functionality of getClientRects is demonstrated here

function getRowRects(element) {
    var rects = [],
        clientRects = element.getClientRects(),
        len = clientRects.length,
        clientRect, top, rectsLen, rect, i;

    for(i=0; i<len; i++) {
        has = false;
        rectsLen = rects.length;
        clientRect = clientRects[i];
        top = clientRect.top;
        while(rectsLen--) {
            rect = rects[rectsLen];
            if (rect.top == top) {
                has = true;
                break;
            }
        }
        if(has) {
            rect.right = rect.right > clientRect.right ? rect.right : clientRect.right;
            rect.width = rect.right - rect.left;
        }
        else {
            rects.push({
                top: clientRect.top,
                right: clientRect.right,
                bottom: clientRect.bottom,
                left: clientRect.left,
                width: clientRect.width,
                height: clientRect.height
            });
        }
    }
    return rects;
}

The behavior of getRowRects can be seen in action here

You can implement detection similar to what is shown here

In case you are working with react, this is the approach I took.

<div 
  ref={ref => {
    if (!ref) return
    const isExceeding = ref.scrollWidth > ref.clientWidth
    if (isExceeding) {
      // add your logic here
    }
  }}
/>

When utilizing the code e.offsetWidth < e.scrollWidth, an issue may arise where the full text is displayed but ellipsis are still present.

This issue occurs because both offsetWidth and scrollWidth round their values, resulting in discrepancies. For instance, offsetWidth may return 161 while the actual width is 161.25. The solution lies in using getBoundingClientRect

const clonedEl = e.cloneNode(true)
clonedElement.style.overflow = "visible"
cllonedElement.style.visibility = "hidden"
clonedElement.style.width = "fit-content"

e.parentElement.appendChild(clonedEl)
const fullWidth = clonedElement.getBoundingClientRect().width
const currentWidth = e.getBoundingClientRect().width

return currentWidth < fullWidth

I didn't have success with the suggested solutions, so I took a different approach. Instead of utilizing CSS for ellipsis, I decided to trim the text at a specific length.

if (!this.isFullTextShown && this.text.length > 350) {
  return this.text.substring(0, 350) + '...'
}
return this.text

I also implemented "more/less" buttons when the text exceeds the specified length.

<span
  v-if="text.length > 350"
  @click="isFullTextShown = !isFullTextShown"
>
  {{ isFullTextShown ? 'show less' : 'show more' }}
</span>

If you are implementing the line-clamp property for adding ellipsis to more than one line, you can incorporate this check:

if (
      contentElement &&
      contentElement.offsetHeight < contentElement.scrollHeight
    ) {
      // apply text-overflow
    }

After testing various methods, I found that the common approaches like

offsetWidth, clientWidth, scrollWidth

const hasEllipsis = (element: HTMLElement) => {
  // determine if text overflows
  // use range-based check for more precise content width measurement
  const range = document.createRange();
  range.selectNodeContents(element);
  const rangeWidth = range.getBoundingClientRect().width;
  // use getBoundingClientRect for better precision
  const elementWidth = element.getBoundingClientRect().width;

  const isOverflowing = rangeWidth > elementWidth;

  return isOverflowing;
};