CSS - Force overflowing elements to disappear if partially hidden

Issue

Let's say we have a box with some short paragraphs:

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

The height of the box is variable, so sometimes one of the paragraphs' text is partially hidden.

Is there a CSS property that would force the paragraph to either display fully or not at all, or would this need to be calculated using javascript?

Solution

I know no way to do this with CSS but with JavaScript, you can check:

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

You can use a binary search to find the last completely visible paragraph.

Answered By - Aaron Digulla