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

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

如果您需要对此进行修改，请发表评论。您还可以检查此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>