
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）](https://codepen.io/chocolat5/pen/BaxQgEM)

## 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).

```html
<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:

```css
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):

```css
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`:

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

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

```jsx
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](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title)

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

```jsx
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）](https://codepen.io/chocolat5/pen/BaxQgEM)

## 参照

- javascript - HTML text-overflow ellipsis detection - Stack Overflow [https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection/10017343#10017343](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](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](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](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/title) (Accessed on September 15, 2022)


How to Check for text-overflow Ellipsis in Multiple Lines

Tags