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

i have div doesn't have fixed height, , has several <p> blocks children. i've been trying use text-overflow or line-clamp, seems these don't apply children. causes text cut off in middle. i'm going try replacing <p> blocks <br>, seems there should better way this. don't know height until after page has rendered, can't precompute in template. have more sensible approach problem?

edit: adding example

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

the css like

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

i've tried different ways of mixing , matching , still of <p> blocks cut off.

if looks ok please let me know - suggested there other css interfering? there lot of css on page possible.

edit: clarification. cutoff vertical one, not horizontal. text on bottom gets cut off in middle, or example character j or y have tail cut off.

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

what constraining height of div?