html - 在可变大小元素的情况下文本重叠

Question

我正在尝试这个小提琴中显示的代码：

http://jsfiddle.net/2aWcV/

如果“$number”可以有任意位数并且我们不知道它的大小与从其他文件中获取的位数一样，如何消除重叠。（$number 是生成的随机数）$number 必须有一个不透明的背景，这样它下面的文本就不会显示出来。

html代码是：

<div class="body">     
<div class="variation font700 green"> 
<h2> 
overflown text must be hidden and the visible text  must be in single line
<span class="divider"> 
$number 
</span>
</h2>
</div>
<div class="clear"></div>  
</div>

Answer 1

您可以调整不透明度 ( opacity : 0.0) 以隐藏文本 $number

.divider{
  border-left: 0.05em solid black;
  margin-left:-2%;
  opacity:0.0;
}

Answer 2

将包含 $number 的 span 的z-index值设置为高于重叠文本可能对您很方便。