Skip to content

Instantly share code, notes, and snippets.

@tgvashworth

tgvashworth/gist:cd24356bb7ec54a8ec1a

Last active August 29, 2015 14:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tgvashworth/cd24356bb7ec54a8ec1a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tgvashworth/cd24356bb7ec54a8ec1a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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.
@blaja

blaja commented Sep 30, 2014

Copy link
Copy Markdown

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

@waltfy

waltfy commented Sep 30, 2014

Copy link
Copy Markdown

Hm, my solution does present some flaws. 😢

@jmwhittaker

jmwhittaker commented Oct 1, 2014

Copy link
Copy Markdown

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