Кросс-браузерный многострочный текст с усечением текста или строки с многоточием с использованием Typescript (React)

Question

Я пытаюсь исправить приведенный ниже код, но не работаю с использованием машинописного текста React

codepen: https://codepen.io/sampalkar/pen/oNXqYWM

рабочий код: https://codepen.io/sampalkar/pen/NWqYbYx но я пытаюсь удалить поле ввода, я хочу показать 2 строки по умолчанию.

var linesElement = 3; //it will truncate at 3 lines.
var truncateElement = document.getElementById('truncateme');
var truncateText = truncateElement.textContent;

var getLineHeight = function getLineHeight(element) {
  var lineHeight = window.getComputedStyle(truncateElement)['line-height'];
  if (lineHeight === 'normal') {   
    return 1.16 * parseFloat(window.getComputedStyle(truncateElement)['font-size']);
  } else {
    return parseFloat(lineHeight);
  }
};

linesElement.addEventListener('change', function () {
  truncateElement.innerHTML = truncateText;
  var truncateTextParts = truncateText.split(' ');
  var lineHeight = getLineHeight(truncateElement);
  var lines = parseInt(linesElement.value);

  while (lines * lineHeight < truncateElement.clientHeight) {
    console.log(truncateTextParts.length, lines * lineHeight, truncateElement.clientHeight);
    truncateTextParts.pop();
    truncateElement.innerHTML = truncateTextParts.join(' ') + '...';
  }
});

.truncateme {
   width: 400px;
}

<div id='linesElement' class="truncateme">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nibh libero, iaculis euismod semper in, molestie vitae elit. Integer efficitur pellentesque massa nec vestibulum. In a libero leo. Cras viverra leo ac mauris ornare, eget pretium neque egestas. Sed ultricies lacus sit amet dolor semper semper. Integer dignissim, nulla a vestibulum tincidunt, urna ante elementum nisi, eget lobortis risus odio ut turpis. Aliquam orci odio, sodales ac mollis eget, scelerisque sed nisl. Vestibulum accumsan lectus tortor, vitae auctor mi pretium vel. Aliquam ornare mollis lacus, vitae tempor tellus sollicitudin quis. Nullam eget lobortis risus. Vestibulum nec vehicula orci. Suspendisse condimentum, ligula rhoncus imperdiet gravida, libero ipsum faucibus eros, in convallis mi orci in purus. Proin posuere nibh nulla, at euismod dolor porta a. Proin a magna sed arcu pulvinar faucibus quis sed leo. Donec posuere ultricies vestibulum.
</div>

Answer 1

За исключением того, что идентификатор для div является неправильным (должно быть truncateme), вы также должны удалить linesElement.addEventListener и установить var lines непосредственно на 2.
Вы можете изменить EventListener на Немедленно вызванный Выражение функции (IIFE).

(function () {
  truncateElement.innerHTML = truncateText;
  var truncateTextParts = truncateText.split(' ');
  var lineHeight = getLineHeight(truncateElement);
  var lines = 2;

  while (lines * lineHeight < truncateElement.clientHeight) {
    console.log(truncateTextParts.length, lines * lineHeight, truncateElement.clientHeight);
    truncateTextParts.pop();
    truncateElement.innerHTML = truncateTextParts.join(' ') + '...';
  }
})();