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

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 overflow: hidden 。

我需要讓它在懸停時顯示帶有整個文本（一些長文本）的工具提示彈出窗口，並且可能當它知道這個elipsis實際上隱藏了一些東西時（所以，當它是必要的時候）。 如何做這樣的事情？

Answer 1

試試下面的代碼示例：

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

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

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>