Обнаружение переполнения или нет БЕЗ JavaScript

Question

Я хочу знать, есть ли только для HTML / CSS способ обнаружить (или, по крайней мере, показать / скрыть некоторые элементы с помощью псевдоклассов и т. Д.), Чтобы предпринять действия, когда содержимое элемента переполняется (по вертикалитолько).Да, я ЗНАЮ, что это можно сделать, и Я ЗНАЮ, как это сделать (мне не нужны примеры JS, ПОЖАЛУЙСТА), я просто хочу знать, есть ли умный способ, без javascript.

Я пытаюсь показать кнопку «еще ...», которая появится ТОЛЬКО при переполнении, и пытаюсь достичь этого без JS, если это возможно.

Answer 1

100% высота решения

Вот версия этого решения для 100% высоты - поэтому, когда контент пытается занять больше, чем вся страница, вы получаете ссылку «больше ...».Это прекрасно работает во всех браузерах.

http://jsfiddle.net/nottrobin/u3Wda/1/

Я использовал JavaScript только для элемента управления «Добавить еще один ряд» - для демонстрационных целей.В настоящем решении JavaScript не используется.

Предупреждение:

• Поскольку высота браузера пользователя является переменной, нет способа гарантировать, что строки не будут обрезаныпополам в точке ссылки «more», или что ссылка «more» будет полностью видимой.

Исходное решение

Сделайте элемент контейнера overflow: hidden и дайтеэто max-height.Затем поместите ссылку «more» внутри этого элемента контейнера с position: absolute, чтобы она находилась внутри max-height.Теперь ссылка «больше» не будет отображаться, если содержимое внутри контейнера не подтолкнет контейнер к max-height.

Если вы осторожны с line-height s, то вы сможете предотвратитьлюбые строки, разбитые пополам.

Пример:
Достаточно текста: http://jsfiddle.net/nottrobin/MrAKv/17/
Слишком много текста: http://jsfiddle.net/nottrobin/MrAKv/16/

Более короткая версия будет работать только в браузерахкоторые поддерживают max-height:
http://caniuse.com/#search=max-height

Если вам нужна поддержка IE6, используйте это несколько менее емкое решение:
http://jsfiddle.net/nottrobin/MrAKv/18/
(Отказ от ответственности - только протестировано в Google Chrome)

Answer 2

Вот один для контейнеров фиксированной высоты: http://jsfiddle.net/NGLN/PC94w/