CSS - Force overflowing elements to disappear if partially hidden

css

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.

Problem

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?

Original source