I have a number of block elements (divs) with potentially long text. The blocks have CSS
.el-clip { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } to clip any text that extends past the end of the divs, and I want my Javascript to know whether the text in a given div is showing the ellipses, so I can add some mouseover text (title attribute) to show the full text.
Please note, I've seen this question "Detect if text-overflow:ellipsis is active on input field", but it's about input elements, not normal block elements, and the existing solutions are not optimal for my question.
My idea for a solution is to compare the width of the element to the width of the same element with an inline style overflow: visible added. If the former is less than the latter, then the ellipses are in use. But I'm wondering if there's a more elegant solution, or (perhaps even) a built-in solution.
UPDATE Wow, I'm surprised. While adding inline style overflow: visible shows the full element, the width remains the same. So my proposed solution doesn't work.
Apparently the width is still constrained by the parent element? That is totally weird. I should note that the div with the text is inside an li and there's a maxWidth on the ul. Is it even possible to make a general purpose function that does what I want?
