0

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 がラッパーの上に表示され、残りのコンテンツがそのまま残るように、その例をスタイル化できますか?

4

2 に答える 2

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>
于 2012-11-25T17:40:35.650 に答える
0

確かに、ツールチップに絶対位置を指定してから、このjsFiddleの例のように必要に応じて移動します

.tooltip{
    color:red;
    position: absolute;
    top:0;
}
.wrapper {
    overflow:hidden;
    height:50px;
    border:1px solid black;
    width:50px;
    margin-top: 20px;
}​
于 2012-11-25T17:02:02.407 に答える