Определение переполненных элементов HTML с ellipsis в JS

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

Для обнаружения обрезания текста с помощью text-overflow: ellipsis, сравните значения element.scrollWidth и element.clientWidth. Обрезание происходит, когда значение scrollWidth превышает значение clientWidth:

const isTruncated = (elem) => elem.scrollWidth > elem.clientWidth;

Чтобы узнать, был ли текст обрезан, вызовите следующую функцию:

console.log(isTruncated(document.getElementById('yourEllipsisElement')));

Для индикации использования многоточия из-за обрезания текста, примените функцию isEllipsisActive:

const isEllipsisActive = (e) => e.offsetWidth < e.scrollWidth;

Адаптируйте HTML под изменчивость окружения, добавив подсказки, которые появляются при наведении курсора:

const freshEllipsisCheck = () => {
  document.querySelectorAll('.ellipsisText').forEach((elem) => {
    elem.title = isEllipsisActive(elem) ? elem.textContent : null;
  });
};

window.addEventListener('resize', freshEllipsisCheck);

Многоточие? Да, пожалуйста, и пусть оно работает во всех браузерах!

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

const isTruncatedWithTolerance = (elem, tolerance = 1) => {
  return elem.scrollWidth – elem.clientWidth > tolerance;
}

Динамичность или ничего!

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

Работа с jQuery: тихо и уместно!

В jQuery возможно добавить псевдо-селектор :truncated для отслеживания обрезания текста:

$.expr[':'].truncated = (el) => $(el).prop('scrollWidth') > $(el).prop('clientWidth');

$('.some-class:truncated').each(function () {
  // Ваш код
});

Клонирование: два — лучше, чем один!

Для определения обрезания текста склонируйте элемент с многоточием и сравните их ширины:

const isTextOverflowing = (el) => {
  const clone = el.cloneNode(true);
  clone.style.display = 'inline';
  clone.style.width = 'auto';
  clone.style.visibility = 'hidden';
  clone.textContent = '...';

  el.parentNode.appendChild(clone);
  const isOverflowing = clone.clientWidth < el.clientWidth;
  clone.parentNode.removeChild(clone);

  return isOverflowing;
};

Визуализация

В узких контейнерах длинный текст сокращается до многоточия, что указывает на скрытое содержимое:

| Полный текст                | Отображаемый текст     |
| --------------------------- | ---------------------- |
| "Абрахадабра; награда..."   | "Абрахадабра..." 📏    |
| "Теория относительности..." | "Теория..." 🧮         |
| "Сшивание вовремя..."       | "Сшивание вовремя..." ⏳ |

CSS-стили для обрезки текста с многоточием:

.narrowContainer {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Детектив по обрезанию текста в действии!

Во время отладки может быть полезно выводить в консоль разницу между offsetWidth и scrollWidth:

console.log('Offset Width:', element.offsetWidth, 'Scroll Width:', element.scrollWidth);

Всплывающие подсказки: и вот вы меня видите!

Регулируйте поведение всплывающих подсказок для элементов с обрезанным текстом по событию mouseenter:

document.querySelectorAll('.ellipsis').forEach((el) => {
  el.addEventListener('mouseenter', function () {
    if (isEllipsisActive(this)) {
      this.setAttribute('title', this.textContent);
    }
  });
});

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

1. text-overflow – CSS: Каскадные таблицы стилей | MDN — официальная документация по свойству text-overflow.
2. Crop String with Ellipsis | CSS-Tricks — примеры создания многоточий с помощью CSS.
3. Handling Long Words and URLs | CSS-Tricks — советы по управлению обрезанием текста в адаптивном дизайне.
4. Can I use... Support tables for HTML5, CSS3, etc — информация о поддержке line-clamp в современных браузерах.
5. text-overflow | CSS-Tricks — руководство по автоматическому обрезанию текста с помощью CSS.