-webkit-line-clamp 兼容性问题

1.一般情况下，想要实现文本超过几行后显示省略号的css。

color: #101010;
font-size: 14px;
text-align: justify;
font-family: SourceHanSansSC-regular
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

2.但是有兼容性问题，就是在苹果手机时省略号会和内容重叠

3.解决的方法有几个，下面说2种，

3.1 方法简单，但如果内容有中英文的话，省略号显示的位置可能会不一样。

（ (屏幕宽度-内容距离屏幕宽度两边的总和)/字体大小）*行数-预留给省略号的长度

window.contentMaxLength = (($(window).width() - 60) / 14) * 3 - 3;

然后获取获取内容的长度再判断一下是否大于计算好的长度进行截取

var conValue = resData.records[i].conValue;if (conValue && conValue.length > contentMaxLength) {    resData.records[i].conValue = conValue.substr(0, contentMaxLength) + ' ...';}

3.2 使用jq提供的ellipsis.js（自动计算内容宽度截断，并加上省略号，内容不受中英文或符号限制）

demo+链接地址: https://github.com/thinhunan/jquery.ellipsis.js

3.3 借鉴修改后的ellipsis.js

(function($) {    $.fn.ellipsis = function(options) {

        // default option        var defaults = {            'row' :3, // show rows            'onlyFullWords': false, // set to true to avoid cutting the text in the middle of a word            'char' : '...', // ellipsis            'callback': function() {},            'position': 'tail' // middle, tail        };

        options = $.extend(defaults, options);

        this.each(function() {            // get element text            var $this = $(this);            var text = $this.text();            var origText = text;            var origLength = origText.length;            var origHeight = $this.height();

            // get height            $this.text('a');            var lineHeight =  parseFloat($this.css("lineHeight"), 10);            var rowHeight = $this.height();            var gapHeight = lineHeight > rowHeight ? (lineHeight - rowHeight) : 0;            var targetHeight = gapHeight * (options.row - 1) + rowHeight * options.row;

            if (origHeight <= targetHeight) {                $this.text(text);                options.callback.call(this);                return;            }

            var start = 1, length = 0;            var end = text.length;

            if(options.position === 'tail') {                while (start < end) { // Binary search for max length                    length = Math.ceil((start + end) / 2);

                    $this.text(text.slice(0, length) + options['char']);

                    if ($this.height() <= targetHeight) {                        start = length;                    } else {                        end = length - 1;                    }                }

                text = text.slice(0, start);

                if (options.onlyFullWords) {                    text = text.replace(/[\u00AD\w\uac00-\ud7af]+$/, ''); // remove fragment of the last word together with possible soft-hyphen characters                }                text += options['char'];

            }else if(options.position === 'middle') {

                var sliceLength = 0;                while (start < end) { // Binary search for max length                    length = Math.ceil((start + end) / 2);                    sliceLength = Math.max(origLength - length, 0);

                    $this.text(                        origText.slice(0, Math.floor((origLength - sliceLength) / 2)) +                        options['char'] +                        origText.slice(Math.floor((origLength + sliceLength) / 2), origLength)                    );

                    if ($this.height() <= targetHeight) {                        start = length;                    } else {                        end = length - 1;                    }                }

                sliceLength = Math.max(origLength - start, 0);                var head = origText.slice(0, Math.floor((origLength - sliceLength) / 2));                var tail = origText.slice(Math.floor((origLength + sliceLength) / 2), origLength);

                if (options.onlyFullWords) {                    // remove fragment of the last or first word together with possible soft-hyphen characters                    head = head.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');                }

                text = head + options['char'] + tail;            }

            $this.text(text);

            options.callback.call(this);        });

        return this;    };}) (jQuery);

页面调用：$(dom).ellipsis();