html - 使溢出 :hidden element 中的一个元素完全可见

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>