css 省略号，3 个点悬停事件

Question

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

Answer 1

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

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