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 来 overflow hidden -空间:nowrap。

我需要让它在悬停时显示工具提示式弹出窗口，其中包含整个文本(一些长文本)，并且可能当它确实知道这个省略号何时实际上隐藏了某些内容时(所以，当它是必要的)。如何做这样的事情？

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>