html - 使溢出中的一个元素完全可见：隐藏元素

Question

请检查http://jsfiddle.net/mtN6R/9/

.tooltip{
    color:red;
}
.wrapper {
    overflow:hidden;
    height:50px;
    border:1px solid black;
    width:50px;
    position:relative;
}


<div class="wrapper">
    <div class='tooltip'>A big tooltip which should be visible fully</div>
     A lot of text<br> 
          A lot of text<br>      
</div>

我需要 .tooltip 使其完全可见，但我不能将它放在包装器之外。我们可以对该示例进行样式化，以便 .tooltip 将显示在包装器上方，而其余内容将保持原样？

Answer 1

我认为你想要的是只有你的内容本身overflow: hidden就可以了：

CSS：

.tooltip{
    color:red;
}
.wrapper {
    position:relative;
}
.inner {
    overflow:hidden;
    height:50px;
    border:1px solid black;
    width:50px;
}

HTML：

<div class="wrapper">
    <div class='tooltip'>A big tooltip which should be visible fully</div>
    <div class="inner">
        A lot of text<br>
        A lot of text<br>
    </div>
</div>

Answer 2

当然，给工具提示一个绝对位置，然后像在这个jsFiddle 示例中那样根据需要移动东西

.tooltip{
    color:red;
    position: absolute;
    top:0;
}
.wrapper {
    overflow:hidden;
    height:50px;
    border:1px solid black;
    width:50px;
    margin-top: 20px;
}​