Stopping cut off text in variable height div with css and javascript that has <p> elements as children

Question

I have a div that doesn't have a fixed height, and has several <p> blocks as children. I've been trying to use text-overflow or line-clamp, but it seems like these don't apply to the children. This causes the text to sometimes be cut off in the middle. What I'm going to try is replacing the <p> blocks with <br>, but it seems like there should be a better way to do this. I also don't know the height until after the page has rendered, so I can't precompute anything in a template. Does anyone have a more sensible approach to this problem?

Edit: adding example

<div class="content">
<p>a big chunk of text</p>
<p>another chunk of text</p>
</div>

The css is something like

.content {text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2;}

I've tried different ways of mixing and matching this and still some of the <p> blocks will be cut off.

If this looks OK please let me know - someone suggested there could be some other css interfering? There is a lot of css on the page so this is possible.

Edit: Another clarification. The cutoff is a vertical one, not a horizontal. The text on the bottom gets cut off in the middle, or for example a character like a j or y will have the tail cut off.

Answer 1

The text is getting cut in half horizontally due to the "overflow:hidden;", and the height of the div not being sufficient for the text content.

What is constraining the height of the div?