Skip to content

Instantly share code, notes, and snippets.

@tgvashworth
Last active August 29, 2015 14:07
Show Gist options
  • Save tgvashworth/cd24356bb7ec54a8ec1a to your computer and use it in GitHub Desktop.
Save tgvashworth/cd24356bb7ec54a8ec1a to your computer and use it in GitHub Desktop.
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.
@jmwhittaker
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment