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

user_2434608 0
Viewed 2659

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.

css
1 Answers

Use offsetHeight and scrollHeight when it gets line-clamped.

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