title: How to vertically clip text so it doesn't split a line in the middle
body: <p>I was wondering if there is some css/js magic that can prevent text from splitting vertically in the middle of a line. I'm using overflow:hidden in the below example. The text is not static ... it is rich-text entered by a user so I do not have control over the formatting.</p>
  
  <p><img src="https://i.stack.imgur.com/AmouY.jpg" alt="the third line of text is clipped in the middle"></p>
  
  <p>i would like it to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/72I3T.jpg" alt="enter image description here"></p>