Geek Answers Handbook

Detect css text-overlow ellipse with jquery

Here is the fiddle

CSS

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

I edited a script created by someone else who wanted to answer this question.

This answer is right and works well, BUT in one case it does not work. If the text should be 100% ellipsis, it hides the last few letters and adds "...", but when you manipulate css and delete the overflow operator, you will see that the size fits.

Thus, this method is not 100% reliable. But I need a 100% worker. please can anyone help me?

+6
source share
2 answers

I forgot to post my decision.

Now I use el.scrollWidth > el.clientWidth; and it works well.
Note that el in this case is not wrapped in jquery.

+2
source

There may be a difference between what the page looks like in the browser and the calculations used to determine if the text will overflow. The box model does not always behave the way we want. However, you can compare the inner width with the scroll width.

Here is a simple example that should correspond to an ellipse showing whether or not it is:

 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 scroll syntax was incorrect.

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

Updated link to the new script:

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

+6
source

More articles:


All Articles