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:

<span id=mySpan style=white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:50px>This is the contents of the span tag.  It should truncate with an ellipsis if it is longer than 50px.</span> 

If I use the standard jQuery way to grab the HTML, I get the full text, not the truncated version. I'm not sure if it is even possible.

html = jQuery('#mySpan').html(); text = jQuery('#mySpan').text(); 

Both return the full text. I'm stumped.

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

Answer 2

@dystroy has given a nice answer, here is another (more future-friendly) way to do this though.

We can use document.caretPositionFromPoint. This is almost a FF only function, but most other browsers provide the same thing under their own function name and API. No I don't know what browsers have against devs but oh well...

Our method works like this:

• select element
• get bounding client position
• put it in the above function to get text offset position
• subtract 3 from it to remove the ellipsis thingy from the offset
• extract text according to that offset from textContent property

Here is a quick demo (should work properly in Webkit and Gecko):

function getRenderedText (el) {    var pos = el.getBoundingClientRect();    var offset, range;    if (document.caretRangeFromPoint) {      range = document.caretRangeFromPoint(pos.right, pos.top);      offset = range.endOffset - 3;    }    else if (document.caretPositionFromPoint) {      range = document.caretPositionFromPoint(pos.right, pos.top);      offset = range.offset - 3;    }    else {      console.error('Your browser is not supported yet :(');    }    return el.textContent.slice(0, offset);  }    console.log(getRenderedText(el));

span {    text-overflow: ellipsis;    width: 40px;    white-space: nowrap;    display: block;    overflow: hidden;  }

<span id="el">foo bar is so much awesome it is almost the bestest thing in the world. devs love foo bar. foo bar all the things!</span>

I have seen an error of maximum 1 character in some cases (weird fonts or edge cases), but most of the time, it works fine.

Hope that helps!