title: Stopping cut off text in variable height div with css and javascript that has <p> elements as children
body: <p>I have a div that doesn't have a fixed height, and has several <code>&lt;p&gt;</code> 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 <code>&lt;p&gt;</code> blocks with <code>&lt;br&gt;</code>, 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?</p>
  
  <p>Edit: adding example</p>
  
  <pre><code>&lt;div class="content"&gt;
  &lt;p&gt;a big chunk of text&lt;/p&gt;
  &lt;p&gt;another chunk of text&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The css is something like</p>
  
  <pre><code>.content {text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2;}
  </code></pre>
  
  <p>I've tried different ways of mixing and matching this and still some of the <code>&lt;p&gt;</code> blocks will be cut off.</p>
  
  <p>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.</p>
  
  <p>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.</p>