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 example

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

从overflow：hidden元素中完全看到一个元素

2 个答案: