内容过长显示省略号鼠标悬停显示

最新推荐文章于 2023-05-29 14:42:25 发布

Sherry198786

最新推荐文章于 2023-05-29 14:42:25 发布

阅读量528

点赞数

原文链接：http://www.cnblogs.com/ShanHeDiao/p/4814075.html

版权

<!doctype html>
<html>

    <head>
        <style type="text/css">
                        //css控制内容过长显示省略号和悬停时显示全部内容
            .li1 {
            list-style:none;
            width:200px;
            white-space:nowrap;
            text-overflow:ellipsis; 
            -o-text-overflow:ellipsis; 
            overflow: hidden;
            margin-top:5px; }

            .li2{
            list-style:none;
            margin-top:5px;
            }
        </style>
    </head>

    <body>
        <ul>
            <li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">内容过长显示省略号 鼠标悬停显示1</a></li>
            <li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">内容过长显示省略号 鼠标悬停显示2</a></li>
            <li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">内容过长显示省略号 鼠标悬停显示3</a></li>
            <li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">内容过长显示省略号 鼠标悬停显示4</a></li>
            <li class="li1" onmouseover="this.className='li2'" onmouseout="this.className='li1'"><a href="#">内容过长显示省略号 鼠标悬停显示5</a></li>
        </ul>
    </body>

</html>

转载于:https://www.cnblogs.com/ShanHeDiao/p/4814075.html

Sherry198786

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内容过长显示省略号鼠标悬停显示

<!doctype html><html> <head> <style type="text/css"> //css控制内容过长显示省略号和悬停时显示全部内容 .li1 { list-style:no...
复制链接

扫一扫