0

I am trying to figure out whether an element has ellipsis. I am using this stackoverflow answer.

When I test on IE the scrollWidth is always greater than offsetWidth. Even if there are no ellipsis, the scrollWidth is 1px greater than the offsetWidth. Works fine of Chrome, as expected.

Please check this example. This will give you different values on IE and Chrome.

Is this happening due to a bug in IE? Is it a known issue? And is there a work around?

Community
  • 1
  • 1
Zuhaib
  • 1,420
  • 3
  • 18
  • 34
  • Since scrollWidth in IE is the same as in Chrome, I would say the offsetWidth is 1px smaller than the scrollWidth. Details, Shmetails. – GolezTrol Dec 29 '14 at 16:26
  • 1
    Looks like `float: left;` is the cause. [An article about `offsetWidth` in IE](http://vadikom.com/dailies/offsetwidth-offsetheight-useless-in-ie9-firefox4/) that might be useful. – MiKo Dec 29 '14 at 16:47
  • @0x2D9A3 The article helped. IE seems to be rounding up `scrollWidth` and rounding down `offsetWidth`. I am able to get the actual width (float val) using `getComputedStyle`, but can't find the actual `scrollWidth`. – Zuhaib Dec 29 '14 at 19:34
  • Workaround answer in this question: https://stackoverflow.com/questions/30900154/workaround-for-issue-with-ie-scrollwidth/47170414#47170414 – Chris Janssen Oct 10 '19 at 19:29

1 Answers1

0

Do you mean a an actual text ellipsis or a css one?

If text it may be better to parse the element's text for three dots at the end. Something like this:

function hasEllipsis(text){
    var regex = /\.\.\.$/;
    return regex.test(text);
}
Rupert
  • 1,629
  • 11
  • 23
  • 1
    It is clearly stated that this is a question about the `text-overflow`-property ellipsis… (And by the way, this comment has an ellipsis that your regexp won't match) – MiKo Dec 29 '14 at 16:56
  • It's the css ellipsis (text-overflow) – Zuhaib Dec 29 '14 at 19:14