title: Attach font icon to last word in text string and prevent from wrapping
body: <p>I want to attach a Font Awesome icon to the last word in a text string:</p>
  
  <pre><code>foo bar●
  </code></pre>
  
  <p>But if a line wrap is required, I want the icon to attach to the last word and have them wrap together:</p>
  
  <pre><code>foo
  bar●
  </code></pre>
  
  <p>My problem is very similar to:
  <a href="https://stackoverflow.com/questions/16100956/prevent-after-element-from-wrapping-to-next-line">Prevent :after element from wrapping to next line</a></p>
  
  <p>However, the solution assumes I have access to the last word. In my case, the text will be generated dynamically. Is there a css/html-only way to ensure the icon wraps with the last word? </p>
  
  <p>Here's a <a href="http://jsfiddle.net/GmeAq/" rel="noreferrer">jsfiddle</a>.</p>