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

Question

I am trying to grab the HTML from a CSS truncated element and can\'t seem to get it right.

For example:

Answer 1

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).