隐藏透明元素后面的溢出内容

Question

我有一个有序列表，其中我向顶级用户显示，其对应点与右侧对齐。示例：http://codepen.io/anon/pen/EkKJC。
当视口太小时，我想隐藏用户名的溢出部分。我不能使用百分比，因为它们不准确。我也不能使用固定宽度，因为内容是动态的 这里的主要问题是透明背景（是的，它必须是透明的），因为它不能使用z-index 我需要一个跨浏览器，语义，css-pure和嵌套标签的解决方案来解决这个问题，或者在IE7 +上。或者也许是另一种处理这种情况的方法。

顺便说一句，我想知道是否有必要（从语义的角度来看）给<span>一个类名，即使我知道其中没有其他<span> <li>。

提前谢谢。

Answer 1

如果您不需要使用javascript或其他内容引用span，则不必为其指定类名。但是你也必须确信网站上不会有任何其他<ol>，我倾向于给<ol>一个#topusers的id

ol#topusers {
  list-style: inside decimal;
  width: 300px;
}

ol#topusers li span {
  float: right;
}

Answer 2

body, footer {
background: url('http://static3.depositphotos.com/1000635/110/v/450/dep_1104872-Helix-seamless-pattern..jpg') fixed repeat 100% 100%;
}

假设页脚必须透明是因为背景图像。

或者，

body {
padding-bottom:(the footer height here);
}

在这里帮忙？

Answer 3

你可以使用css的opacity属性来隐藏透明元素背后的内容。

将内容放在div元素中，然后设置该div的不透明度。 感谢。