zoukankan      html  css  js  c++  java
  • 多行文本溢出显示省略号(...)的方法

    -webkit-line-clamp

    -o-ellipsis-lastline

    jQuery

    除了各个浏览器私有的属性,有没有跨浏览器的解决方法呢?当然是通过js实现啦!(通过从后向前逐个删除末尾字符,直至元素的高度小于父元素高度)
    <!DOCTYPE html>   
    <html xmlns="http://www.w3.org/1999/xhtml">   
      <head>   
        <title>  </title>   
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
        <script type="text/javascript" src="jquery-1.6.4.min.js"></script>
        <script type="text/javascript">
                $(function(){
                    $(".figcaption").each(function(){
                        var divH = $(this).height();
                        var $p = $("p",$(this)).eq(0);
                        while($p.outerHeight() > divH){
                            $p.text($p.text().replace(/(s)*([a-zA-Z0-9]+|W)(...)?$/,"..."))
                        }
                    });
                })
        </script>
        <style type="text/css">
            .figcaption{
                width: 300px;
                height: 50px;
                border: 1px solid #000;
                overflow: hidden;
            }
            .figcaption p{
                margin: 0;
                padding: 0;
                border: 1px solid #f00;
            }
        </style>
    
      </head>   
      <body >
          <div class="figcaption">
                <p>dfsdfsdfsdfsdfsdfsdfasdfadddddsfsaddddd天ddddddd天天天天天天天dfsddfsd天天天天大放送天天ddddd天天ddd天dddd天天弟弟的dddddd天天ddd天ddd天dd地地天天天天</p>
          </div>
      </body>   
    </html> 
  • 相关阅读:
    Synchronized和Lock的实现原理和锁升级
    如何禁止CPU指令重排
    MESI缓存一致性
    归并排序
    强软弱虚四种引用和ThreadLocal内存泄露
    VINS-Mono代码分析与总结(完整版)
    IMU误差模型与校准
    小感
    K8S conul部署
    Centos Consul集群及Acl配置
  • 原文地址:https://www.cnblogs.com/ron123/p/3780715.html
Copyright © 2011-2022 走看看