Here is a fiddle

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?

Here is a fiddle

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?

• javascript
• jquery
• html
• css

• Why would you remove the overflow? – Florin Pop Commented Oct 29, 2014 at 11:47
• just live in console, so you can see, that the text fits – Xandrios93 Commented Oct 29, 2014 at 11:54
• 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 Commented Oct 29, 2014 at 12:34
• What exactly do you want to do? – trenthaynes Commented Oct 29, 2014 at 13:42
• 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 Commented Oct 29, 2014 at 13:44

2 Answers 2

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 pare 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/whipdancer/67upsqq8/1/

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.