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

Answer 1

You can use negative margin the width of the icon and css transform. Here a fiddle how to do :

    .container {
        width: 50px;
    }
    .icon-circle {
        background:black;
        height:10px;
        width:10px;
        display: inline-block;   
        margin-left:5px;
    }
    .ANSWER{
        display:block;
        padding-right:15px; /* width of the icon */
    }
    .ANSWER .icon-circle{
        margin-left:-10px;
        transform:translate(15px);
    }

    
What we want
    

        foo bar
    

    


    
What happenned
    

        foo bar
    

    


    
The answer
    

        foo bar
    

Have a nice day!