title: Unable to break text on hyphen within floated element
body: <p>The following image shows how I would like a set of nested elements to appear.</p>
  
  <p><a href="https://i.stack.imgur.com/8TjCw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8TjCw.png" alt="desired layout"></a></p>
  
  <p>However, the elements are actually appearing like this...</p>
  
  <p><a href="https://i.stack.imgur.com/qV7fM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qV7fM.png" alt="enter image description here"></a></p>
  
  <p>I've tried setting various <code>overflow</code> and <code>white-space</code> options but can't achieve what I'm hoping for. My best guess is that the <code>float</code> is causing the blue-outlined element to have no width and consequently there's no reason to break the text.</p>
  
  <p>How can I fix this?</p>