Подсчет текстовых строк в DOM элементе: Javascript и CSS

const el = document.getElementById('yourIdHere'); // Замените 'yourIdHere' на ID вашего элемента
const lineHeight = parseInt(window.getComputedStyle(el).lineHeight); // Определяем высоту строки
const lineCount = Math.ceil(el.scrollHeight / lineHeight); // Делим полную высоту на высоту строки для подсчёта их числа 🧮

const style = window.getComputedStyle(el); // Собираем информацию о стилях
const lineHeight = parseInt(style.lineHeight); // Определяем высоту строки
const paddingBottom = parseInt(style.paddingBottom); // Учитываем нижний отступ
const paddingTop = parseInt(style.paddingTop); // И верхний отступ
const borderHeight = parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth); // Учитываем высоту границ
const adjustedHeight = el.scrollHeight – paddingBottom – paddingTop – borderHeight; // Находим "чистую" высоту
const lineCount = Math.ceil(adjustedHeight / lineHeight); // Получаем количество строк

const boxSizing = style.boxSizing; // Узнаем значение box-sizing
const totalVerticalPadding = paddingBottom + paddingTop + borderHeight; // Общая величина вертикальных полей и границ
const lineCount = boxSizing === 'border-box' // Учтём значение box-sizing
  ? Math.ceil((el.clientHeight – totalVerticalPadding) / lineHeight)
  : Math.ceil(el.clientHeight / lineHeight);

[🔷🔷🔷🔷] – Элемент DOM
[🔷🔷]    – Текстовое содержимое
📊 Счёт – Обнаружено 2 строки!

['Arial', 'Verdana', 'Times', 'Cursive'].forEach(fontFamily => { // Коллекция различных шрифтов
  el.style.fontFamily = fontFamily; // Применяем каждый шрифт
  // Здесь подсчитываем строки для каждого применённого стиля
});

window.addEventListener('resize', () => { // Будьте готовы к изменениям!
  // Повторяем подсчёт строк при каждом изменении размера
});

document.querySelectorAll('element br').forEach((br, index) => { // Отслеживаем их! 
  // Включаем переносы строк в общий подсчёт
});

Array.from(el.getClientRects()).length; // Проверим, не пропустили ли мы что-то

const clone = el.cloneNode(true);
clone.style.position = 'absolute';
clone.style.width = '{desired_width}px'; // Укажите нужную ширину
document.body.appendChild(clone); // Отправляем клон в бой
// Теперь он поможет подсчитать все строки, не занимая места на экране

const widestChar = 'W';
el.textContent = widestChar.repeat(100); // Для примера повторим 'W' сто раз
// Это контрольное действие и не затронет внешний вид страницы