How to Check for text-overflow Ellipsis in Multiple Lines

When using text-overflow: ellipsis in CSS to truncate long text, you can display ellipsis (...) or other symbols in the truncated portion.

If you want to show the full text in a tooltip only when it is truncated, you need to check whether text-overflow: ellipsis is applied using JavaScript. While it can be achieved using the method mentioned in the answer to HTML text-overflow ellipsis detection for single-line text, some modifications are needed for multi-line text.

Here's a demonstration that has already been created. You can check the complete source code here:
デモ（CodePen）

Setting up the HTML

Here's a layout with cards containing text. We have prepared three types of text: two with up to two lines and one with three lines (with and without truncation).

<div class="card-list">
  <div class="block">
    <p class="text">Lorem ipsum dolor sit amet, consectetur</p>
  </div>

  <div class="block">
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
  </div>

  <div class="block">
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
  </div>
</div>

Truncating Text Longer Than the Specified Length in CSS

For single-line truncation, you can use the following CSS properties:

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

For multi-line truncation, you can use the following CSS properties (where the number in -webkit-line-clamp represents the number of lines):

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Checking if text-overflow: ellipsis is Applied with JavaScript

text-overflow: ellipsis is applied when the content of an element exceeds its specified size. To determine this, compare the height of the element's content (the entire text) with the height of the area in which the element is displayed (the height of the three lines specified in CSS).

Use Element.scrollHeight to get the height of the element's content and Element.offsetHeight to get the height of the area in which the element is displayed. If the height of the content is greater than the height of the display area, return true.

Create a function that takes a text element and determines whether text-overflow: ellipsis is applied, returning true or false:

const isEllipsisActive = (el) => {
  return (el.offsetHeight < el.scrollHeight);
}

Execute this function for each text element (sample .text) by passing them one by one:

const elements = document.querySelectorAll('.text');

elements.forEach((el) => isEllipsisActive(el));

Displaying a Tooltip When text-overflow: ellipsis is Applied

To display a tooltip, use HTMLElement.title. Specify the tooltip text by adding title="This text will be displayed as a tooltip" to the HTML element.

"Typically, the text is displayed in a "tooltip" popup when the mouse is hovering over the node."
ー HTMLElement.title - Web API | MDN

Only for cases where the function returns true, add a title attribute with the full text to the HTML element.

elements.forEach((el) => {
  if(isEllipsisActive(el)) {
    // Get the full text
    const text = el.textContent;
    // Add the full text along with the title
    el.setAttribute('title', text);
  }
});

Demo

In the demo, the result of the function for detecting text-overflow: ellipsis is written to the console.
Open the console to verify if the detection is working correctly.

Demo & Source（CodePen）

参照

• javascript - HTML text-overflow ellipsis detection - Stack Overflow https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection/10017343#10017343(Accessed on September 15, 2022)
• Element.scrollHeight - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight (Accessed on September 15, 2022)
• HTMLElement.offsetHeight - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetHeight (Accessed on September 15, 2022)
• HTMLElement.title - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title (Accessed on September 15, 2022)