title: Wrap long href in div with a floated image
body: <p>I am trying to wrap text around a floated image with a long href as part of the text.</p>
  
  <p>I can get the text to wrap no problems, but when I add a long link (whos width exceeds that of the floated image), the link is forced below the floated image.</p>
  
  <p>So this:</p>
  
  <pre><code> __________________________
  | text text text   _____   |
  | text text text  |     |  |
  | text text text  |_____|  |
  | text text text           |
  | text text text text text |
  | text text.               |
  |__________________________|
  </code></pre>
  
  <p>becomes this:</p>
  
  <pre><code> __________________________
  | text text text   _____   |
  | text text text  |     |  |
  | text text       |_____|  |
  |                          |
  | &lt;this is the link&gt; text  |
  | text text text text text |
  | text.                    |
  |__________________________|
  </code></pre>
  
  <p>Where I would like this:</p>
  
  <pre><code> __________________________
  | text text text   _____   |
  | text text text  |     |  |
  | text text &lt;this |_____|  |
  | is the link&gt;             |
  | text text text text text |
  | text text.               |
  |__________________________|
  </code></pre>
  
  <p>I have tried "word-break: break-all;" but of course, this breaks every line, often mid word.</p>
  
  <p>I have considered using JavaScript to insert "&lt;wbr /&gt;" tags after the protocol, domain, extension, and any uri params in the text portion of the "a" tag, but was hoping for a CSS solution, if one exists.</p>
  
  <p>Here is a JSFiddle of the conundrum <a href="http://jsfiddle.net/vBbau/2/" rel="nofollow">http://jsfiddle.net/vBbau/2/</a>.</p>
  
  <p>Anyone know a more elegant solution to this?</p>
  
  <p>Cheers.</p>