标签设置溢出隐藏后怎样鼠标滑过显示标题全部内容

最新推荐文章于 2023-04-28 17:21:33 发布

韩Jeor

最新推荐文章于 2023-04-28 17:21:33 发布

阅读量2.5k

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_39178666/article/details/85064599

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

标签设置溢出隐藏后怎样鼠标滑过显示标题全部内容

title属性

利用标签自带title属性，将title属性设置与文件名称相同即能实现鼠标滑过显示标题的全部内容。

这是一个demo

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cl{
            display:inline-block;
            width:100px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            text-decoration:none;
            color:black;
        }
    </style>
</head>
<body>
    <a href="javascript:;" class="cl" title="11111111111111111111111111111111111111111111111111111111111">
        1111111111111111111111111111111111111111111111111111111111111111111</a>
</body>

另一种方法是通过CSS hover鼠标划入让一个定位的div显示隐藏也可以实现

第二个demo

<head>
    <meta charset="UTF-8">
    <style type="text/css">
        .show {
            display: block;
            width: 250px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .show:hover{
            overflow: auto;
            white-space: normal;
        }
    </style>
    <title>Title</title>
</head>
<body>
    <a class="show" href="#">测试的文字测试的文字测试的文字测试的文字测试的文字测试的文字测试的文字测试的文字测试的文字测试的文字测试的文字测试的文字</a>
</body>

2018-12-18 日常打卡
more about me

韩Jeor

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
标签设置溢出隐藏后怎样鼠标滑过显示标题全部内容

标签设置溢出隐藏后怎样鼠标滑过显示标题全部内容title属性利用标签自带title属性，将title属性设置与文件名称相同即能实现鼠标滑过显示标题的全部内容。这是一个demo&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt;
复制链接

扫一扫

专栏目录