Есть ли способ захватить CSS усеченный текст через jQuery?

Я пытаюсь захватить HTML из CSS усеченного элемента и не может показаться правильным.

Например:

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

Если я использую стандартный способ jQuery для захвата HTML, я получаю полный текст, а не усеченную версию. Я не уверен, что это возможно.

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

Оба возвращают полный текст. Я в тупике.

Ответы

Ответ 1

Вы можете вычислить его:

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

Демонстрация

Конечно, это работает только для элемента с overflow:hidden;text-overflow:ellipsis, но его легко адаптировать, когда нет text-overflow:ellipsis: просто удалите +"…".

Обратите внимание, что это совместимо со всеми браузерами и дает точный результат (w3.org указывает, что символ … должен использоваться браузер).

Ответ 2

@dystroy дал хороший ответ, вот еще один (более удобный для будущего) способ сделать это, хотя.

Мы можем использовать document.caretPositionFromPoint. Это почти функция только FF, но большинство других браузеров предоставляют одно и то же под своим именем функции и API. Нет, я не знаю, какие браузеры имеют против разработчиков, но хорошо...

Наш метод работает следующим образом:

  • выбрать элемент
  • получить ограниченную позицию клиента.
  • поместите его в вышеуказанную функцию, чтобы получить положение смещения текста.
  • вычитайте 3 из него, чтобы удалить эллипсис из смещения
  • извлечь текст в соответствии с этим смещением от свойства textContent

Вот быстрая демонстрация (должна корректно работать в Webkit и 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>