gistfile1.txt

I want a box that contains some text and an image or icon.

The icon should sit just to the right of the text, unless the text+image fills the width of the box.

The text should then finish with ellipsis, but the icon should stay in a fixed position.

The surrounding box should fill multiple fixed-width containers.

+-------------------+        
|        +          |        
|  Blah +-+         |        
|        +          |        
+-------------------+        
+-------------------+        
|                +  |        
|  Blah blah... +-+ |        
|                +  |        
+-------------------+        
+---------------------------+
|                        +  |
| Blah blah blah bla... +-+ |
|                        +  |
+---------------------------+

Bonus points if you can support multiple icons.

Is there a solution somewhere in this: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

Something like this http://jsfiddle.net/nn8q5s7t/

http://jsbin.com/zutozegeriho/8/edit?html,css,output

Sime Vidas has a nice example of this. http://webplatformdaily.org/ Not 100% what you want but also good to see.

Hm, my solution does present some flaws. 😢

http://codepen.io/anon/pen/lngwE?editors=110

https://gist.github.com/jmwhittaker/5dc0a431b464b0cdf490

Maybe trying to over engineer this. Can use background img or a :before and content to get desired result.