zoukankan      html  css  js  c++  java
  • css省略号效果

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
        <title>New Document </title>
        <style>
            .ctl
            {
                table-layout: fixed;
            }
            .xx
            {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                padding: 2px;
            }
            
            .ellipsis {50%;text-overflow:ellipsis; }/*just for ie*/
            ul
    {
        padding: 0px;
        margin: 0px;
        list-style: none;padding-left:10px;
        
        
    }
            li{
            
            
            90%;     
    white-space:nowrap;     
    text-overflow:ellipsis;     
    -o-text-overflow:ellipsis;     
    overflow: hidden;      
            }
            
        </style>
    </head>
    <body>

    <div style="80%;border:1px solid red">
    <ul>
            <li><span>1</span><span class="ellipsis">小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;</span></li>
            <li><span>1</span>小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;</li>
            <li><span>1</span>小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;</li>
            <li><span>1</span>小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;</li>
        </ul>
        </div>
        <table cellspacing="0" cellpadding="1" width="100%" class="ctl" border="1">
            <tbody>
                <tr>
                    <td class="xx">
                        <a href="#"><font>小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;</font></a>
                    </td>
                    <td style="60px">
                        (1/1)
                    </td>
                </tr>
                <tr>
                    <td>
                        小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;
                    </td>
                    <td>
                        (1/1)
                    </td>
                </tr>
                <tr>
                    <td>
                        小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;
                    </td>
                    <td>
                        (1/1)
                    </td>
                </tr>
                <tr>
                    <td>
                        小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;小王童鞋是大坏蛋;
                    </td>
                    <td>
                        (1/1)
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>
  • 相关阅读:
    【Prince2科普】衡量绩效的六大要素
    项目组合管理、项目集管理、项目管理和组织级项目管理之间的关系
    javascript中关系运算符的整理
    javascript中数组的基础----length和元素的求和
    回调函数和递归函数的应用
    谷歌浏览器打开时显示的是搜狗
    二级导航栏的立体显示
    利用css写的中英文切换的导航栏菜单
    javascript中的对象浅谈
    javascript中逻辑运算符总结
  • 原文地址:https://www.cnblogs.com/yuanxiaoping_21cn_com/p/2297933.html
Copyright © 2011-2022 走看看