I have an ordered list in which I show the top users, with their corresponding points aligned to the right. Example: http://codepen.io/anon/pen/EkKJC.
I'd like to hide the overflowing part of the username when the viewport is too small. I can't use percentages because they aren't accurate. Neither can I use fixed widths because the content is dynamic.
The main problem here is the transparent background(yes, it must be transparent), because it doesn't work to use z-index.
I need a cross-browser, semantic, css-pure and nested-tag-less solution to this problem, or at leat IE7+. Or maybe another way to handle this situation.
And by the way, I'd like to know if it's necessary(in a semantic point of view) to give the \[code\]<span>\[/code\] a class name, even though I know there will be no other \[code\]<span>\[/code\] in the \[code\]<li>\[/code\].
Thanks in advance.
I'd like to hide the overflowing part of the username when the viewport is too small. I can't use percentages because they aren't accurate. Neither can I use fixed widths because the content is dynamic.
The main problem here is the transparent background(yes, it must be transparent), because it doesn't work to use z-index.
I need a cross-browser, semantic, css-pure and nested-tag-less solution to this problem, or at leat IE7+. Or maybe another way to handle this situation.
And by the way, I'd like to know if it's necessary(in a semantic point of view) to give the \[code\]<span>\[/code\] a class name, even though I know there will be no other \[code\]<span>\[/code\] in the \[code\]<li>\[/code\].
Thanks in advance.