css省略号，3点悬停事件

Question

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

Answer 1

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

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

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