Каждый из нас знает про text-overflow: ellipsis — ту самую магию, что обрезает текст и добавляет многоточие «…», если он не помещается в контейнер. А что делать, если хочется показывать title только тогда, когда текст обрезан? Раньше мне казалось, что это невозможно… но решение оказалось проще, чем я думал!
👌 Трюк, который решает задачу: сравниваем внутренние размеры элемента (clientWidth и clientHeight) с его размерами с прокруткой (scrollWidth и scrollHeight). Это простое сравнение подскажет, когда текст обрезан, а когда нет.
- Если текст в одну строку (white-space: nowrap;), то проверяем element.scrollWidth > element.clientWidth. Здесь всё просто: если ширина текста больше ширины контейнера, значит, title не помешает.
- Если текст в несколько строк с ограничением (-webkit-line-clamp: 3; -webkit-box-orient: vertical;), то стоит показать title, если element.scrollHeight > element.clientHeight. Если высота текста превышает высоту контейнера — значит, он обрезан, и всплывающая подсказка будет кстати.
🔥 Бонус: В примере (на скриншоте) размеры элемента статичны, но если размеры динамичны (например, зависят от размера окна), добавьте проверку в событие resize или используйте ResizeObserver, чтобы адаптировать проверку под любые изменения.
✨ Теперь ваш UI станет более чистым и понятным для пользователя! Попробуйте внедрить этот трюк, и пусть он вас порадует своей простотой и эффективностью!
А вы сталкивались с такой задачей или только мне так везет 🙈 И как вам удалось её выполнить? 👇
Больше лайфхаков и полезных материалов вы найдете в моем Telegram-канале Frontmind. Присоединяйтесь!
#Frontend #React #JavaScript