Attach font icon to last word in text string and prevent from wrapping

Question

I want to attach a Font Awesome icon to the last word in a text string:

foo bar●

But if a line wrap is required, I want the icon to attach to the last word and have them wrap together:

foo
bar●

My problem is very similar to: Prevent :after element from wrapping to next line

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?

Here's a jsfiddle.

Answer 1

Interestingly enough, I found you only need to change one line of code for this to work. Testing on your .container2 element in jsFiddle, change this

.container2:after {
    font-family: FontAwesome;
    content: "\f111";
    display: inline-block;
}

to

.container2:after {
    font-family: FontAwesome;
    content: "\f111";
    display: inline;
}

It seems to work with any width I set the container to and will stay connected to what ever foo will be.