zoukankan      html  css  js  c++  java
  • css自动截取文字 兼容IE firefox Opera

    1 .rowhidden {/*文字超过行宽后,自动隐藏*/
    2 display:block;white-space:nowrap;overflow:hidden;
    3 -o-text-overflow: ellipsis;/**//* for Opera */
    4 text-overflow:ellipsis; /**//* for IE */
    5  }
    6 .wrap {/*自动换行*/
    7 word-wrap: break-word; word-break: normal;
    8 }

    用css来实现自动截取文字,不需要后台程序和JS的使用。

    好处是:兼容IE,firefox,Opera;有利于内容完整性;有利于SEO;无需后台程序处理;可以在前台随时调节要截取的长度。

    不好的地方:不能自动判断截取长度,当字符很短的时候在Firefox中也会生成后面的省略符号。

    另外在设置截取宽度的时候,要注意,尽量让文字截取完整。

    <html>
    <head>
    <FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
    <title>css文字截取</title>
    <style type="text/css">
    body{font-size:13px;color:#8c966b;}
    div{clear:both;340px;border:1px solid #333;margin:3px;padding:3px;}
    div a{color:#8c966b;text-decoration:none;}
    div a:hover{text-decoration:underline;}
    div a{display:block;310px;white-space:nowrap;overflow:hidden;float:left;
    -o-text-overflow: ellipsis;    /**//* for Opera */
    text-overflow:ellipsis;        /**//* for IE */
    }
    div:after{content:"...";padding-left:3px;font-size:12px;}/**//* for Firefox */
    </style>
    </head>
    <body>
    <div><a href="" _fcksavedurl="">用css来实现自动截取文字,不需要后台程序和JS的使用</a></div>dedecms.com 
    <div><a href="" _fcksavedurl="">好处是:有利于内容完整性,有利于SEO,无需后台程序处理,可以在前台随时调节要截取的长度。</a></div>
    <div><a href="" _fcksavedurl="">不好的地方:不能自动判断截取长度,当字符很短的时候在Firefox中也会生成后面的省略符号。</a></div>
    <div><a href="" _fcksavedurl="">另外在设置截取宽度的时候,要注意,尽量让文字截取完整</a></div>
    <div><a href="http://www.div-css.com" _fcksavedurl="http://www.div-css.com">Web标准化 www.div-css.com</a></div>
    </body>
    </html>

    aliyun活动 https://www.aliyun.com/acts/limit-buy?userCode=re2o7acl
  • 相关阅读:
    LRU(Least Recently Used最近最少使用)的c++实现(顺序表)
    linux下的性能分析profiling(动态)
    实习的具体内容
    x86_64 Ubuntu 14.04 LST安装gcc4.1.2 转载
    Gem5全系统模式下运行SPLASH-2 Benchmarks使用alpha ISA
    gem5 运行x86全系统仿真
    Linux操作系统下三种配置环境变量的方法——转载
    找实习小结
    multi2sim,booksim简介
    破壳(2)之触摸
  • 原文地址:https://www.cnblogs.com/wangbin/p/1740068.html
Copyright © 2011-2022 走看看