悬停时显示全文并带有文本溢出：省略号

受到这篇文章的启发，有人会

只想为那些触发列表上文本溢出规则的列表项设置活动标题属性。因此，您可以将鼠标悬停在任何被截断的文本上，并查看其全文的工具提示

这是我的方法。

<div>
    <span><span>Some longer text visible on hover</span></span>
    <span><span>Another longer text visible on hover</span></span>
    <span><span>Short text</span></span>
</div>

div {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}
div>span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
span>span:hover {
    position: absolute;
    background-color: rgba(5, 255, 255, 1);
}

以上是悬停时显示全文并带有文本溢出：省略号的详细内容。更多信息请关注PHP中文网其他相关文章！