Ситуация типичная, есть блок, он ограничен по высоте и содержит список из множества элементов. Существует ли лаконичный способ идентифицировать переполнение блока содержимым?
ПС: По моему, однажды я видел решение на чистом CSS, блоку имеющему переполнение устанавливался красный цвет фона.
Ankhena, Простите, в случае с JS, какое это имеет значение? По части CSS любой пример, будь то модификация родительского элемента и\или дочерних, без разницы, на что у вас хватит опыта.
На этом сервисе полно спрашивающих не в состоянии идентифицировать проблему. Т.е. им кажется, что они не могут справится с какой-то проблемой. А на самом деле, этой проблемы не было бы вовсе начни они решать задачу другим способом. В вашем случае это могла бы быть задача многострочного text-overflow ellipsis или просто overflow или что-то аналогичное.
Ваша проблема решается на js путем сравнения двух (или четырех, в зависимости от верстки) размеров.
Либо с помощью IntersectionObserver (подходит ли для вашей задачи тоже зависит от верстки) https://habr.com/ru/post/494670/
Ankhena, Зачем сюда приписывать text-overflow, когда речь идет о блоке, внутри которого расположен список (любой тип списка)... Просто блок ограниченный по высоте, внутри которого лежит список, который в свою очередь, переполняет блок, разве это сложно представить? Разве этого недостаточно для конкретизации задачи?
Ваша проблема решается на js путем сравнения двух (или четырех, в зависимости от верстки) размеров.
Так и есть! getBoundingClientRect и parentElement. Но возможно есть и более изящные и быстрые способы...
IntersectionObserver
API обеспечивает вызов определенной функции каждый раз при пересечении целевого элемента с root или viewport.
Простите, не представляю как и зачем. Мне только нужно отследить переполнение и все! Выше я писал о CSS, видел пример с красным фоном, так вот, найдя этот пример, я просто собирался прочитать у родителя свойство bg (ну или другое) через getComputedStyle
И давайте так: вы расскажете всю задачу и мы попробуем помочь вам найти к ней то самое изящное или признаем, что кроме банального сравнения размеров делу не помочь :)
Дмитрий, есть способ на чистом css, но он основан на количестве элементов списка. Т.е. если вы знаете, что до 10 элементов не переполняют точно, а с 11 и более переполняют - можно менять стили элементов списка, например цвет фона.
black1277, К сожалению, размер элементов списка мне неизвестен и он может быть любым. Возможно, меня подводит память и решение на CSS вообще было про другое...
