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

原文 标签 javascript jquery html css

我有这样的东西。

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


我这样做的目的是,通过写text-overflow:elipsisoverflow: hiddenwhite-space:nowrap来使文本长于溢出的范围。

我需要让它显示带有整个文本(某些长文本)的工具提示式弹出窗口,并且可能何时它知道此elipsis何时实际上隐藏了某些内容(因此,何时必要)。怎么做那样的事情?

最佳答案

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

关于javascript - 以工具提示的形式显示文本溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43913463/

相关文章:

html - CSS内联 block 居中内容

javascript - Javascript 2D 数组分配

javascript - 如何将背景图像更改添加到 jQuery

jquery - 我需要通过jquery在颜色选择上自动触发ajax

javascript - 如何将数据添加到jquery创建的元素?

html - 如何更改 Bootstrap 字形的颜色?

javascript - JavaScript警报PHP字符串与空格

javascript - 检测用户是否在JS中使用Brave

javascript - JS : How to remove white spaces only from inside of string

javascript - 带有倾斜边框的预先存在的 div 中的新 div