title: HTML/CSS: How to Prevent Single Word Orphans Near Floated Elements?
body: <p>When I have enough screen width, text wraps nicely around a right floated image (see first example below).  But when the viewport narrows, I can find a single word the the left of the image, with the rest of the text below it, especially if one of the first few words is longer in length (see second example below).</p>
  
  <p>Short of adding extra left margin on the image (which would look weird when there's plenty of space), is there anything I can do to prevent this?</p>
  
  <p>I won't know ahead of time either the actual text content nor the width of the viewport.</p>
  
  <p><a href="https://i.stack.imgur.com/TEd5u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TEd5u.png" alt="enter image description here"></a></p>