CSS - заставляет переполненные элементы исчезать, если они частично скрыты

Question

Допустим, у нас есть поле с несколькими короткими абзацами:

<div style="overflow:hidden">
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
</div>

Высота поля является переменной, поэтому иногда текст одного из абзацев частично скрыт.

Есть ли свойство CSS, которое заставляло бы абзац отображаться полностью или не отображаться вообще, или это нужно было бы рассчитать с использованием JavaScript?

Answer 1

Я не знаю, как это сделать с помощью CSS, но с помощью JavaScript вы можете проверить:

var parent = element.parentElement;
if (element.clientTop + element.clientHeight > parent.clientTop + parent.clientHeight) {
    ... element is outside parent ...
}

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