В Javascript и / или JQuery, как я могу получить первую строку текста в завернутый div - PullRequest
Новая
       6

В Javascript и / или JQuery, как я могу получить первую строку текста в завернутый div

0 голосов
/ 27 апреля 2018

Я хочу получить первую строку текстового содержимого div, где текст был обернут браузером в несколько строк из-за стиля div, который показывает только первую строку. Вот HTML-код div и стиль, используемый для скрытия всего, кроме первой строки: 

<div id="element"
     style="display: inline-block; height: 20px; overflow: hidden;
            width: 70px;">asdfl asf af adf adsf dsaf adsf adsfdsa fdsaf dsa fdas fdsa f dsaf dsa fdsa f dsaf sad</div>

Текст внутри div не упакован предварительно, теги и и содержащийся текст находятся в одной строке (как показано), встроенные новые строки отсутствуют (\ n), а шрифт не зафиксирован (поэтому подсчет символов в строке не будет работать).

Когда я проверяю div, как innerHTML, так и innerText содержат: 

"asdfl asf af adf adsf dsaf adsf adsfdsa fdsaf dsa fdas fdsa f dsaf dsa fdsa f dsaf sad"

В этом примере я хочу получить «asdfl asf» только после того, как все пробелы в конце были обрезаны, если они есть.

Суть проблемы заключается в том, чтобы иметь возможность получить строку, как ее обернул браузер.

1 Ответ

0 голосов
/ 27 апреля 2018

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

function get_first_line(element) {
    var original = element.text();
    element.text(original[0]);
    var height = element.height();
    var first = original;
    for (var i = 2; i < original.length; ++i) {
        element.text(original.slice(0, i));
        if (element.height() > height) {
            first = original.slice(0, i - 1);
            break;
        }
    }
    element.text(original);
    return first;
}

РЕДАКТИРОВАТЬ А вот рабочий код с дефисами, решение заключается в переносе каждого символа в span, они являются встроенными элементами, поэтому они работают так же, как символы в терминах переноса. 

function get_first_line(element) {
  var original = element.text();
  var text = original.trim();
  // if you care about IE change it to normal function
  element.html(text.split('').map((c) => '<span>' + c + '</span>'));
  var chars = element.find('span');
  var offset = chars.eq(0).offset();
  var first = original;
  for (var i = 1; i < chars.length; i++) {
    if (chars.eq(i).offset().top > offset.top) {
      first = text.slice(0, i);
      break;
    }
  }
  element.text(original);
  return first;
}

И кодовое демо https://codepen.io/jcubic/pen/erBRmb?editors=1010

...