首页 > web前端 > css教程 > 悬停时显示全文并带有文本溢出:省略号

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

DDD
发布: 2024-12-04 11:19:09
原创
669 人浏览过

Show full text on hover with text-overflow: ellipsis

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

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

这是我的方法。

<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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板