码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-09-16 20:02:16      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

标签:

原文地址:http://www.cnblogs.com/ShanHeDiao/p/4814075.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!