Checking for CSS-truncated text with JavaScript

Question

Checking for CSS-truncated text with JavaScript

I am currently working on a JavaScript project to determine if text is truncated. While I found a useful solution mentioned here, there is one edge case that needs to be addressed. Despite the visual truncation of the text, the first block on mouse hover incorrectly returns false.

function checkTruncationStatus(element) {
  return (element.offsetWidth < element.scrollWidth);
}

function handleMouseHover(element) {
  console.log(`Is the text truncated: ${checkTruncationStatus(element)}`);
}

div.red {
  margin-bottom: 1em;
  background: red;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 300px;
  cursor: pointer;
}

<h6>Hover over the text and check the console for messages.</h6>

<!-- Expected to return true -->
<div class="red" onmouseover="handleMouseHover(this)">
  <a>Analytics reports come through garbled. Please check</a>
</div>

<!-- Expected to return true -->
<div class="red" onmouseover="handleMouseHover(this)">
  <a>Analytics reports come through garbled. Please check again</a>
</div>

<!-- Expected to return false -->
<div class="red" onmouseover="handleMouseHover(this)">
  <a>Normal text</a>
</div>

The solution I am seeking is for the function to accurately detect when text is truncated by CSS.

javascript html css text truncate

Answer 1

Answer №1

It appears that the issue lies in the fact that both HTMLElement.offsetWidth and Element.scrollWidth are rounded values.
On my computer, the true inner-width of your element is actually 300.40625px, but this gets rounded down to 300px in Chrome.

The solution is to utilize APIs that return float values, although there are limited options available...

One might be tempted to inspect the inner width of the <a> element using getBoundingClientRect().width, which would work in most cases. However, it may fail if there are additional styling elements like padding in the div or margins on the <a> element.

A possible solution involves checking whether the text content exceeds the element's visible width by adding the truncated class dynamically based on the result.

Another approach utilizes Range and its getBoundingClientRect() method to determine if the text is truncated due to the width exceeding the element's boundaries.

To address the specific behavior in Chrome, where the ellipsis rendering is exposed in the result of Range.getClientRects(), a method toggles the text-overflow property and observes the appearance of the DOMRect.

While this strategy satisfies the detection in Chrome, a separate check for Safari is required, considering the differences in how browsers handle the ellipsis rendering.

Update:

Chrome no longer exposes the bounding box of the ellipsis when the start range is 0, impacting the reliability of the workaround in certain scenarios. Therefore, additional measures may be needed to address this change in behavior.

Answer 2

It appears that the issue lies in the fact that both HTMLElement.offsetWidth and Element.scrollWidth are rounded values.
On my computer, the true inner-width of your element is actually 300.40625px, but this gets rounded down to 300px in Chrome.

The solution is to utilize APIs that return float values, although there are limited options available...

One might be tempted to inspect the inner width of the <a> element using getBoundingClientRect().width, which would work in most cases. However, it may fail if there are additional styling elements like padding in the div or margins on the <a> element.

A possible solution involves checking whether the text content exceeds the element's visible width by adding the truncated class dynamically based on the result.

Another approach utilizes Range and its getBoundingClientRect() method to determine if the text is truncated due to the width exceeding the element's boundaries.

To address the specific behavior in Chrome, where the ellipsis rendering is exposed in the result of Range.getClientRects(), a method toggles the text-overflow property and observes the appearance of the DOMRect.

While this strategy satisfies the detection in Chrome, a separate check for Safari is required, considering the differences in how browsers handle the ellipsis rendering.

Update:

Chrome no longer exposes the bounding box of the ellipsis when the start range is 0, impacting the reliability of the workaround in certain scenarios. Therefore, additional measures may be needed to address this change in behavior.

Answer 3

Answer №2

Here is a simple solution to check if text is truncated:

const isTextTruncated = (element) => {
  const clone = element.cloneNode(true);
  clone.style.display = 'inline';
  clone.style.width = 'auto';
  clone.style.visibility = 'hidden';
  document.body.appendChild(clone);
  const isTruncated = clone.offsetWidth >= element.clientWidth;
  clone.remove();
  return isTruncated;
}

This code may not be the most elegant, but it gets the job done.

Answer 4

Here is a simple solution to check if text is truncated:

const isTextTruncated = (element) => {
  const clone = element.cloneNode(true);
  clone.style.display = 'inline';
  clone.style.width = 'auto';
  clone.style.visibility = 'hidden';
  document.body.appendChild(clone);
  const isTruncated = clone.offsetWidth >= element.clientWidth;
  clone.remove();
  return isTruncated;
}

This code may not be the most elegant, but it gets the job done.

Answer 5

Answer №3

Kaiido correctly identified the issue when discussing the discrepancy between rounded values like offsetWidth and scrollWidth, and the floating-point values used to display ellipsis. While a suitable cross-browser solution eluded him, a combination of his insights with a tweaked version of see sharper's method proved effective and reliable across different browsers.

The enhanced approach involving a modified version of the code below:

function isEllipsisActive(e) {
    const temp = e.cloneNode(true);

    temp.style.position = "fixed";
    temp.style.overflow = "visible";
    temp.style.whiteSpace = "nowrap";
    temp.style.visibility = "hidden";

    e.parentElement.appendChild(temp);

    try {
        const fullWidth = temp.getBoundingClientRect().width;
        const displayWidth = e.getBoundingClientRect().width;

        return fullWidth > displayWidth;
    } finally {
        temp.remove();
    }
}

When combined with the following script:

function isEllipsisActive(e) {
    const temp = e.cloneNode(true);

    temp.style.position = "fixed";
    temp.style.overflow = "visible";
    temp.style.whiteSpace = "nowrap";
    temp.style.visibility = "hidden";

    e.parentElement.appendChild(temp);

    try {
        const fullWidth = temp.getBoundingClientRect().width;
        const displayWidth = e.getBoundingClientRect().width;

        return {
            offsetWidth: e.offsetWidth,
            scrollWidth: e.scrollWidth,
            fullWidth,
            displayWidth,
            truncated: fullWidth > displayWidth
        };
    } finally {
        temp.remove();
    }
}

// Additional functions and event listeners go here
...

The final solution delivers accurate results and is capable of handling ellipsis display inconsistencies in various web browsers seamlessly.

Answer 6

Kaiido correctly identified the issue when discussing the discrepancy between rounded values like offsetWidth and scrollWidth, and the floating-point values used to display ellipsis. While a suitable cross-browser solution eluded him, a combination of his insights with a tweaked version of see sharper's method proved effective and reliable across different browsers.

The enhanced approach involving a modified version of the code below:

function isEllipsisActive(e) {
    const temp = e.cloneNode(true);

    temp.style.position = "fixed";
    temp.style.overflow = "visible";
    temp.style.whiteSpace = "nowrap";
    temp.style.visibility = "hidden";

    e.parentElement.appendChild(temp);

    try {
        const fullWidth = temp.getBoundingClientRect().width;
        const displayWidth = e.getBoundingClientRect().width;

        return fullWidth > displayWidth;
    } finally {
        temp.remove();
    }
}

When combined with the following script:

function isEllipsisActive(e) {
    const temp = e.cloneNode(true);

    temp.style.position = "fixed";
    temp.style.overflow = "visible";
    temp.style.whiteSpace = "nowrap";
    temp.style.visibility = "hidden";

    e.parentElement.appendChild(temp);

    try {
        const fullWidth = temp.getBoundingClientRect().width;
        const displayWidth = e.getBoundingClientRect().width;

        return {
            offsetWidth: e.offsetWidth,
            scrollWidth: e.scrollWidth,
            fullWidth,
            displayWidth,
            truncated: fullWidth > displayWidth
        };
    } finally {
        temp.remove();
    }
}

// Additional functions and event listeners go here
...

The final solution delivers accurate results and is capable of handling ellipsis display inconsistencies in various web browsers seamlessly.

Checking for CSS-truncated text with JavaScript

Answer №1

Update:

Answer №2

Answer №3

Similar questions

Tips for Utilizing Border-Radius in Safari

Issue with jQuery fadeIn() and fadeOut() functions on IE versions 7 and 8

AngularJS Encounter: A Grand 404 Glitch

What is the best way to clear an input value in Vuejs after it has been submitted?

I am interested in creating a ranking system in JavaScript using JSON data based on points

Span wrapped in a hover effect

How to position ion-title at the center using position:absolute

Can state values be utilized as content for Meta tags?

Resize images in PHP and MySQL with precision without distorting the image

Exploring the Differences Between Arrays in JavaScript

If I choose a different option from the dropdown list, I would like a textbox to appear

What is the best way to synchronize MultiView and TreeView in ASP.NET web forms?

Page for users to login using React

When iterating through a JavaScript object, opt for utilizing references instead of repeatedly specifying the path

The presence of Null is detected during the HTML parsing process

An asynchronous function does not provide a result

What is the specified height for the AppBar and Toolbar components in Material-UI?

Is there a way to merge attribute selectors for elements that satisfy one condition or the other?

Adding new rows between existing rows in an HTML table using Jquery syntax

Utilize the power of MYSQL and PHP in conjunction with an HTML form to