HTML5网页设计

html_css

CSS实现超出文本省略号显示

时间:2010-09-21 22:51来自:未知作者:admin点击:
在网站开发中经常用到文本超出范围省略号显示,通常在程序中就能达到此效果,这里用CSS也能实现,兼容firefox IE6 IE7 完整代码如下: CSS代码: .cssbox { width: 300px; margin: 40px auto; border: 1px solid #D4D4D4; background: #F1F1F1; } .cssbox ul

在网站开发中经常用到文本超出范围省略号显示,通常在程序中就能达到此效果,这里用CSS也能实现,兼容firefox IE6 IE7 完整代码如下:

CSS代码:


   .cssbox  {
        width: 300px;
        margin: 40px auto;
        border: 1px solid #D4D4D4;
        background: #F1F1F1;
    }
    .cssbox ul {
        padding: 12px 4px 12px 24px;
    }
    .cssbox ul li {
        margin: 12px 0;
    }
    .cssbox ul li a {
        display: block;
        width: 220px;
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }
    /* firefox only */
    .cssbox ul li:not(p) {
        clear: both;
    }
    .cssbox ul li:not(p) a {
        max-width: 170px;
        float: left;
    }
    .cssbox ul li:not(p):after {
        content: "...";
        float: left;
        width: 25px;
        padding-left: 5px;
        color: #000;
    }

HTML代码:


   <div class="cssbox">
      <ul>
        <li><a href="#">设计酷-shejicool.com:CSS实现超出文本省略号显示</a></li>
        <li><a href="#">设计酷-shejicool.com:CSS实现超出文本省略号显示</a></li>
        <li><a href="#">设计酷-shejicool.com:CSS实现超出文本省略号显示</a></li>
        <li><a href="#">设计酷-shejicool.com:CSS实现超出文本省略号显示</a></li>
        <li><a href="#">设计酷-shejicool.com:CSS实现超出文本省略号显示</a></li>
        <li><a href="#">设计酷-shejicool.com:CSS实现超出文本省略号显示</a></li>
      </ul>
    </div>

运行代码查看效果:

提示:可以先修改部分代码后再运行

当前文章地址:http://www.shejicool.com/web/html_css/css-shengluehao-xianshi.html

上一篇:WEB标准 下一篇:CSS网页制作10个小技巧
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐