以工具提示的形式顯示文本溢出

Question

我有這樣的事情。

<div class="someclass"> 
    <label data-fieldid="191366" data-val="159" class="evLabel form-control"> 
     Some Long Text 
    </label> 
</div> 

我說得那麼，如果文本太長寫text-overflow:elipsis，overflow: hidden和white-space:nowrap比溢出隱藏。

我需要使其顯示工具欄彈出式與懸停的整個文本（一些長文本），可能當它確實知道什麼時候這個elipsis實際上隱藏的東西（所以，當它是必要的）。如何做這樣的事情？

Answer 1

試試下面的代碼示例：

HTML：

<label for="x" title="Long Long Long ............... Text">Long Long Long ............... Text</label> 

的CSS：

label { 
    text-overflow:ellipsis; 
    overflow:hidden; 
    display:inline-block; 
    white-space:nowrap; 
    width:50px; 
} 

Answer 2

如果您需要在此修改，請評論。您還可以檢查此LINK

div { 
 
    line-height: 20px; 
 
} 
 

 
#data { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
} 
 

 
#data:hover { 
 
    overflow: visible; 
 
    white-space: normal; 
 
    width: auto; 
 
    position: absolute; 
 
    background-color: #FFF; 
 
} 
 

 
#data:hover+div { 
 
    margin-top: 20px; 
 
}

<div>1: ONE</div> 
 
<div id="data">2: Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two </div> 
 
<div>3: THREE</div> 
 
<div>4: Four</div>