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。

我需要在悬停时使用整个文本（Some Long Text）显示工具提示弹出窗口，并且可能在知道此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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: