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
  • 相关阅读:
    携程开源框架Apollo基础学习(一)
    nslookup,dig,host的用法详解
    curl命令学习
    Saltstack本地管理无master模式
    Mybatis 动态 sql 是做什么的?都有哪些动态 sql?能简述一下动态 sql 的执行原理不?
    JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
    #{}和${}的区别是什么?
    为什么说 Mybatis 是半自动 ORM 映射工具?它与全自动的区别在哪里?
    MyBatis 与 Hibernate 有哪些不同?
    MyBatis 的好处是什么?
  • 原文地址:https://www.cnblogs.com/wangbin/p/1740068.html
Copyright © 2011-2022 走看看