Определение переполненных элементов 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);
}
});
});
Полезные материалы
- text-overflow – CSS: Каскадные таблицы стилей | MDN — официальная документация по свойству
text-overflow
. - Crop String with Ellipsis | CSS-Tricks — примеры создания многоточий с помощью CSS.
- Handling Long Words and URLs | CSS-Tricks — советы по управлению обрезанием текста в адаптивном дизайне.
- Can I use... Support tables for HTML5, CSS3, etc — информация о поддержке
line-clamp
в современных браузерах. - text-overflow | CSS-Tricks — руководство по автоматическому обрезанию текста с помощью CSS.