Detect CSS text-overflow ellipsis with jQuery

Question

CSS:

div{
    width:160px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    text-transform: uppercase;
}

I edited a fiddle created by someone else who meant to answer this question.

This solution works well, BUT in one case does not work correctly. If the text should be 100% of the box ellipsis, it is hiding the last few letters and adding "...". However, when you manipulate the CSS and remove the overflow statement, then the size fits.

So this way is not 100% reliable, but I need a 100% working one.

Does anyone have a proper solution?

first you need to NOT use text-overflow and measure the height, and then use it and measure the height, and if it's the same height, then don't use text-overflow. — vsync
– vsync, Commented Oct 29, 2014 at 12:34
there is a Class in javascript based on jQuery created by me called FancyTooltip. this has an option to look, if the text is cut by ellipsis. works well... until this happens, what i describe in my question — Xandrios93
– Xandrios93, Commented Oct 29, 2014 at 13:44

trenthaynes · Accepted Answer · 2014-10-29 12:31:14Z

6

There can be a difference between how the page looks in the browser and the calculations used to determine if the text will overflow. The box model doesn't always behave as we want. That said, you can compare the innerwidth with the scrollwidth.

Here is a simple example that should correspond to the ellipse showing if true:

if ($('#div')[0].scrollWidth >  $('#div').innerWidth()) {
    //ellipse should be showing because the text is in overflow
}

I updated your fiddle and it works as I expect. Your syntax for scrollwidth wasn't correct.

e.scrollWidth vs. $(e)[0].scrollWidth

Updated link to the new fiddle:

http://jsfiddle.net/whipdancer/67upsqq8/1/

edited Oct 29, 2014 at 12:31

answered Oct 29, 2014 at 12:01

trenthaynes

1,6782 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Xandrios93 Over a year ago

Here is an updated fiddle: jsfiddle.net/cgzW8/338 as you can see, your answer dont work as well :(

trenthaynes Over a year ago

Actually, in my browser your fiddle behaves as I expect. Which is my point about the differences in how it looks vs. the calculations used to determine how the box model renders.

Xandrios93 Over a year ago

i dont know, if i understand, what you want to tell me, but can you tell me then, what i can do? im using newest version of chrome

trenthaynes Over a year ago

I linked to the wrong fiddle. See if the correct link addresses your issue.

Xandrios93 Over a year ago

ya, but you edited the width :D thats not that, what i can do in my project. so the problem is still not solved :(

|

Xandrios93 · Accepted Answer · 2016-03-11 09:05:51Z

3

I forgot to post my solution.

Now i'm using el.scrollWidth > el.clientWidth; and it's working well.
Note that el in this case is not jquery wrapped.

answered Mar 11, 2016 at 9:05

Xandrios93

2,3251 gold badge16 silver badges28 bronze badges

Collectives™ on Stack Overflow

Detect CSS text-overflow ellipsis with jQuery

CSS:

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

CSS:

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related