多行文本最后行末尾省略号显示

来源：互联网发布：淘宝怎么解除限制登录编辑：程序博客网时间：2024/06/05 07:55
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>xdlines-demo</title>        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>        <style type="text/css">            /*第1种方式: CSS样式,只适用于webkit内核的移动端*/            .ellipsis {              display: -webkit-box;/*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/              -webkit-box-orient: vertical;/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/              -webkit-line-clamp: 2;              overflow: hidden;              text-overflow: ellipsis;              word-break: break-all;              width: 300px;              color: red;              font-size:24px;            }            /*第2种方式: CSS样式需要放在body之前*/            .el{width: 300px;margin:60px 0; font-size:34px;}        </style>    </head>    <body>        <p class="ellipsis">            这是一段测试文字,可以通过更改传入对象的max属性来改变最终的显示行数，超出部分会以省略号显示。        </p>        <p class="el">            这是一段测试文字,可以通过更改传入对象的max属性来改变最终的显示行数，超出部分会以省略号显示。        </p>        <p class="el">            这是一段测试文字,可以通过更改传入对象的max属性来改变最终的显示行数，超出部分会以省略号显示。        </p>        <script type="text/javascript">        (function($) {            $.fn.xdlines = function(options) {                var opts = $.extend({}, $.fn.xdlines.defaults, options);                var $this = $(this);                for(var k = 0; k < $this.length; k++) {                    var $obj = $this.eq(k);                    $obj.css({ wordWrap: 'break-word' })                    var str = $obj.text();                    str = str.replace(/(^\s*)|(\s*$)/g, "");                    var l = str.length;                    var txt = '';                    var lineHeight; //单行高度                    var linesNum = opts.max; //需要的行数                    for(var i in str) {                        txt += str[i];                        $obj.text(txt);                        var nowh = parseInt($obj.css('height')); //当前高度                        if(i == 0) {                            lineHeight = nowh * linesNum;                        }                        if(nowh > lineHeight) {                            var txt = txt.substring(0, txt.length - 3) + "...";                            $obj.text(txt);                            break;                        }                    }                }            };            $.fn.xdlines.defaults = { max: 1 }        })(jQuery)        $('.el').xdlines({max:2});    </script>    </body></html>
阅读全文
0 0