Determine if ellipsis is being displayed when using -webkit-line-clamp for multiline ellipsis

Question

We are using the multiline CSS ellipsis as per https://css-tricks.com/line-clampin/. We want to detect if the ellipsis is being displayed, and make a decision to show the tooltip based on whether ellipsis is being displayed.

I tried to compare the offsetWidth and the scrollWidth, but those values are the same regardless of whether the ellipsis are displayed. If anyone has hints, your help is greatly appreciated. Thank you.

Answer 1

Use offsetHeight and scrollHeight when it gets line-clamped.

const isEllipsisActive = (element: HTMLElement) => {
     return element.offsetHeight < element.scrollHeight;
}