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> 
  • 相关阅读:
    Leetcode 127 **
    Leetcode 145
    Leetcode 144
    Leetcode 137
    Leetcode 136
    重写nyoj2——括号匹配
    堆排序
    Leetcode 150
    【转】个人最常用的Eclipse快捷键
    Ajax编程中,经常要能动态的改变界面元素的样式
  • 原文地址:https://www.cnblogs.com/ron123/p/3780715.html
Copyright © 2011-2022 走看看