• 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
  • 相关阅读:
    JSP项目中使用ueditor(百度编辑器)
    web安全—tomcat禁用WebDAV或者禁止不需要的 HTTP 方法
    网站开发常用jQuery插件总结(六)关键词说明插件cluetip
    网站开发常用jQuery插件总结(五)滚动条插件nanoscroller
    网站开发常用jQuery插件总结(四)验证插件validation
    网站开发常用jQuery插件总结(三)拖拽插件gridster
    网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me
    网站开发常用jQuery插件总结(一)提示插件alertify
    wordpress整站搬家总结
    C#中指针使用总结
  • 原文地址:https://www.cnblogs.com/wangbin/p/1740068.html
Copyright © 2020-2023  润新知