zoukankan      html  css  js  c++  java
  • 超出多少字用省略号代替

    对于单行文字, 很简单.

    .oneLine {  
         200px;  
        overflow: hidden;  
        white-space: nowrap;  
        text-overflow: ellipsis;  
    }
    

      对于多行文字, 上面的代码就不适用了. web-kit based 的浏览器提供了对这个特殊需求的支持.

    .twoLine {  
        overflow: hidden;  
        text-overflow: ellipsis;  
        display: -webkit-box;  
        -webkit-line-clamp: 3;  
        -webkit-box-orient: vertical;  
    }
    

      

    你只要调整-webkit-line-clamp的值就能实现在第n行[...].

    对于其他内核的浏览器就只能用javascript来hack了.

    参考地址:

    http://yanzhihong23.iteye.com/blog/1743395

    http://www.css88.com/webkit/-webkit-line-clamp/

    不忘初心,方得始终,初心易得,始终难守。
  • 相关阅读:
    三维聚源
    js--继承
    1.名字忘了
    html5--画布
    Html批量读取json
    get获取Json
    5-jQuery
    Sublime Text
    Redis,JedisPool工具类
    向指定url发送Get/Post请求
  • 原文地址:https://www.cnblogs.com/chuxinsyn/p/9329107.html
Copyright © 2011-2022 走看看