隐藏右侧的可变宽度元素

Question

我有以下布局： http : //jsfiddle.net/yHPTv/2487/

我需要做的是将.hidden类隐藏在.block类的右边缘，并使其仅在悬停时（通过滑入）显示到您在JSFiddle中看到的当前位置。

问题是， .hidden类的宽度可变，这意味着其中的内容（ ABCDEFGHIJKL ）可以完全不同，有时更短，有时更长。

我该如何解决？

编辑：通过将其隐藏在.block类的右边缘来弄清楚我的意思，我的意思是这样 ，除非它不会显示。

HTML：

<div class="block">
    <div class="hidden">ABCDEFGHIJKL</div>
</div>

CSS：

.block {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    right: 0;
}

Answer 1

为了解决我自己的问题，我只是从.block .hidden删除了right: 0 ，然后将left: 100%删除。

http://jsfiddle.net/yHPTv/2488

HTML：

<div class="block">
    <div class="hidden">ABCDEFGHIJKL</div>
</div>

CSS：

.block {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
    background: lightgrey;
}

.block .hidden {
    background: red;
    padding: 3px 10px;
    position: absolute;
    bottom: 0;
    left: 100%;
}