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.

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.

• javascript
• jquery
• html
• css

• overflow:hidden instead of overflow=hidden – Pik_at Commented May 19, 2015 at 14:06
• 10 you would have to calculate this yourself – Daniel A. White Commented May 19, 2015 at 14:06
• 1 The truncation is just an visual effect which does not change anything actually. You will of course get the full text (in your DOM) through the text() or html() method. – Renfei Song Commented May 19, 2015 at 14:08
• The text are already set on the DOM, ellipsis are just use to styling – Pik_at Commented May 19, 2015 at 14:09
• Related stackoverflow./questions/777340/… – Benjamin Gruenbaum Commented May 19, 2015 at 14:33

2 Answers 2

You can pute 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 patible with all browsers and gives the exact result (the w3 specifies that the … character is to be used by the browser).

@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!