省略号，3点悬停的事件

Question

我有一个小问题，我在html中的表格单元格中有太长的文字，所以我在css的省略号中使用文本溢出属性设置，例如w3c中的示例：https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow 我想知道我是否可以制作弹出窗口将在文本末尾悬停在3个点后显示的例子，这是否可能没有复杂的js代码？或者我必须制作我自己的一段代码，它将显示3个点而不是其余的文本，然后将悬停功能附加到它们或其他东西上？

Answer 1

您可以使用元素的title属性来实现您的目标，而无需编写任何额外的代码。只需运行以下代码段并将鼠标悬停在文本上即可查看结果。

＆＃13;

＆＃13;

.ellipses {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

＆＃13;

<div class="ellipses" title="This is some long text that will not fit in the box">This is some long text that will not fit in the box</div>

＆＃13;

＆＃13;

＆＃13;