title: Detecting CSS text-overflow: ellipsis in Firefox
body: <p>I'm trying to detect (via javascript) when text-overflow is in effect. After much research, I have a working solution, except in any version of Firefox:</p>
  
  <p><a href="http://jsfiddle.net/tonydew/mjnvk/" rel="nofollow noreferrer">http://jsfiddle.net/tonydew/mjnvk/</a></p>
  
  <p>If you adjust the browser so that the ellipsis is applied, Chrome, Safari, even IE8+ will alert that the ellipsis is active. In Firefox (every version I have tried, including 17 and 18) not so much. Firefox will always tell you ellipsis is NOT active.</p>
  
  <p>The console.log() output shows why:</p>
  
  <pre><code>Firefox (OS X):
  116/115 - false
  347/346 - false
  
  Chrome (OS X):
  116/115 - false
  347/851 - true 
  </code></pre>
  
  <p>In Firefox, scrollWidth is never greater than offsetWidth.</p>
  
  <p>The closest thing I can find to a solution is "<a href="https://stackoverflow.com/questions/1332185/why-are-ie-and-firefox-returning-different-overflow-dimensions-for-a-div">Why are IE and Firefox returning different overflow dimensions for a div?</a>" but I am already using the proposed solution.</p>
  
  <p>Can anyone shed some light on how to make this work in Firefox too please?</p>
  
  <p><hr/>
  EDIT: In addition to @Cezary answer below, I found a method thay does not require changes to the markup. However, it is doing a little more work because it temporarily clones each element to do the measurement against:</p>
  
  <pre><code>$(function() {
      $('.overflow').each(function(i, el) {
          var element = $(this)
                        .clone()
                        .css({display: 'inline', width: 'auto', visibility: 'hidden'})
                        .appendTo('body');
  
          if( element.width() &gt; $(this).width() ) {
              $(this).tooltip({
                  title: $(this).text(),
                  delay: { show: 250, hide: 100 },
              });
          }
          element.remove();
      });
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/tonydew/gCnXh/" rel="nofollow noreferrer">http://jsfiddle.net/tonydew/gCnXh/</a></p>
  
  <p>Anybody have a comment on the efficiency of this? If I have a page of many potential overflow elements, is this going to have negative effects? I'd like to avoid modifying existing markup if I can, but not at the expense of excessive JS processing on each page load.</p>