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

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

html>

 

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

你可能感兴趣的:(内容过长显示省略号 鼠标悬停显示)