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

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

posted on 2015-09-16 18:10 潸何阅读(1464) 评论(0) 收藏举报

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

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