Бесплатный вебинар
«как найти любимую работу»
Подарки на 150 000 ₽ за участие
Живой эфир
Записи не будет!
00:00:00:00
дн.ч.мин.сек.

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

Быстрый ответ

Воспользуемся следующим кодом на JavaScript для подсчёта количества текстовых строк в элементе DOM, где все строки имеют одинаковую высоту и не имеют переполнения:

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

Глубже к сути: Учёт отступов и границ

У блочных элементов есть особенности. Если в элементе есть отступы или границы, это может повлиять на точность подсчёта. Подкорректируем расчёт:

JS
Скопировать код
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); // Получаем количество строк

Свойство box-sizing: Учтите нюансы

Свойство box-sizing элемента (border-box или content-box) может значительно влиять на расчёты. Поэтому нужно учесть это:

JS
Скопировать код
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);

Визуализация подсчёта строк

Для наглядности процесс подсчёта строк можно изобразить так:

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

Приспособление к различным размерам шрифтов и стилям

Размеры шрифтов неизбежно влияют на количество строк. Нужно быть готовым к этому:

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

Динамическая адаптация макета и изменение размеров окна

В адаптивном дизайне содержимое постоянно меняется. Обработчик событий поможет актуализировать подсчёт строк:

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

Перенос строки: Не упустите из виду

Переносы строк также могут вносить коррективы в количество строк. Следите за этим:

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

Инлайновые элементы также могут скрывать переносы строк. Метод getClientRects() поможет их выявить:

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

Когда встречаются крайние случаи, учитесь на них

При переполнении потока содержимого: отыскиваем скрытые строки

В потоковой верстке изменение ширины контейнера может скрывать строки. Отследим такие изменения, создав копию элемента:

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

Адаптивность браузеров и шрифтов

Для обеспечения надёжности проверяйте результаты подсчёта строк в различных браузерах и условиях:

Не забывайте о трёх важных аспектах:

  • Проверка в разных браузерах (Chrome, Firefox, Safari, Edge),
  • При различных размерах окна браузера, и
  • Учитывая различные уровни масштабирования и размеры текста с учётом доступности.

Особое внимание к широким символам

Если в тексте присутствуют широкие символы, они могут заметно повлиять на подсчёт. Вот каким образом можно это учитывать:

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

Полезные материалы

  1. Свойство Element: clientHeight – Web APIs | MDN — Изучаем свойство clientHeight для измерения элементов.
  2. display | CSS-Tricks — Всё об особенностях свойства CSS display и его влиянии на расположение текста.
  3. Range – Web APIs | MDN — Сила Range API в удобстве обработки текста.
  4. line-height | CSS-Tricks — Понимаем, как line-height влияет на верстку текста.
  5. Метод Window: getComputedStyle() – Web APIs | MDN — Познакомимся с getComputedStyle, вашим верным помощником в определении размеров.
  6. Свойство Node: textContent – Web APIs | MDN — Способность textContent DOM-узла управлять текстом открывает большие возможности.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой код используется для подсчёта количества текстовых строк в элементе DOM?
1 / 5