首页技术文档Css › firefox 下模拟text-overflow:ellipsis

firefox 下模拟text-overflow:ellipsis

firefox到现在还不支持text-overflow:ellipsis;

用css模拟,还有很多问题,而且也只是在ul,li标签试用了下!

firefox                  ie8                chrome

 <style type="text/css">
        * {margin: 0;padding: 0;}
        body{font:100%/1.5 Arial,sans-serif;}
        a {text-decoration: none;color:#06C;}
        ul {list-style:none;margin:20px 50px;width:240px;}

        li{
            height:25px;
            overflow:hidden;
            width:100%;
        }
        li a{
            float:left;
            position:relative;
            width:95%;
            overflow:hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            }

        @-moz-document url-prefix(){
        li a{
            white-space:normal;
            overflow:visible;
            }

        li:after{
            content:"...";

        }
        li a:after{
            content:"...";
            margin:-10px -18px 0 0;
            display:block;
            background-color:#fff;
        }
        }

</style>

    <ul>
        <li><a href="#">adfda阿三打发打三分爱的发地方爱的飞。</a></li>
        <li><a href="#">阿三打发打三分爱的发地方爱的飞。</a></li>
        <li><a href="#">阿三打发打三分爱的发地方爱的飞。</a></li>
        <li><a href="#">W爱的飞。</a></li>
        <li><a href="#">阿风热额为!</a></li>
        <li><a href="#">阿三打发打三分爱的发地方爱的飞。</a></li>
        <li><a href="#">一扇经常开启的门要润滑油。</a></li>
        <li><a href="#">一扇经常开启的门的铰链不需要润滑油。</a></li>
        <li><a href="#">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</a></li>
        <li><a href="#">一扇经常开启的门的铰链滑油。</a></li>
    </ul>
本站技术交流群:24735919,欢迎大家进群交流探讨!

发表评论