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

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>