How to Check If Text Is Truncated by CSS Using JavaScript

HTML text-overflow ellipsis detection

Once upon a time I needed to do this, and the only cross-browser reliable solution I came across was hack job. I'm not the biggest fan of solutions like this, but it certainly produces the correct result time and time again.

The idea is that you clone the element, remove any bounding width, and test if the cloned element is wider than the original. If so, you know it's going to have been truncated.

For example, using jQuery:

var $element = $('#element-to-test');
var $c = $element
           .clone()
           .css({display: 'inline', width: 'auto', visibility: 'hidden'})
           .appendTo('body');

if( $c.width() > $element.width() ) {
    // text was truncated. 
    // do what you need to do
}

$c.remove();

I made a jsFiddle to demonstrate this, http://jsfiddle.net/cgzW8/2/

You could even create your own custom pseudo-selector for jQuery:

$.expr[':'].truncated = function(obj) {
  var $this = $(obj);
  var $c = $this
             .clone()
             .css({display: 'inline', width: 'auto', visibility: 'hidden'})
             .appendTo('body');

  var c_width = $c.width();
  $c.remove();

  if ( c_width > $this.width() )
    return true;
  else
    return false;
};

Then use it to find elements

$truncated_elements = $('.my-selector:truncated');

Demo: http://jsfiddle.net/cgzW8/293/

Hopefully this helps, hacky as it is.

How do I determine if truncation is being applied in my style through JS?

Keep in mind that CSS never alter the DOM!!!

jQuery Snippets:

$(function() {
    $('a.link').each(function(e) {
        var link = $(this).text();
        if ( link.length > 100) {
            $(this).attr('title', link );
        }
    });
});

Assuming you have links

<a class="link" href="" >the brown fox jumps over the lazy dog</a>

the above code wil produce

    <a class="link" href="" title="the brown fox jumps over the lazy dog" >
     the brown fox jumps over the lazy dog
    </a>

the text-overflow: ellipsis; property will do the rest as you know!

GOING AHEAD:

there is a small plugin here

I wanted to be able to use this feature in all browsers, so I wrote a small jQuery plugin in order to support Firefox. To use, just call ellipsis() on a jQuery object. For example:

$("span").ellipsis();

http://ajaxian.com/archives/text-overflow-for-firefox-via-jquery

Determine if ellipsis is showing for text truncated with -webkit-line-clamp

So the trick with this was to check the height, not width.

const determineIsTruncated = () => {
  if (!element.current) return false;
  return element.current.scrollHeight > element.current.clientHeight;
};

Is there any way to grab the CSS truncated text via jQuery?

You can compute it :

$.fn.renderedText = function(){
  var o = s = this.text();
  while (s.length && (this[0].scrollWidth>this.innerWidth())){
    s = s.slice(0,-1);
    this.text(s+"…");
  }
  this.text(o);
  return s;
}

var renderedText = $("#mySpan").renderedText(); // this is your visible string

Demonstration

Of course this only works for an element with overflow:hidden;text-overflow:ellipsis but it's easy to adapt when there's no text-overflow:ellipsis: just remove the +"…".

Note that this is compatible with all browsers and gives the exact result (the w3.org specifies that the … character is to be used by the browser).

Detect CSS text-overflow ellipsis with jQuery

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.