vue多行省略，js多行省略

注意：
1.在使用过程中，必须给使用指令的节点设置行高，因为该指令是通过DOM的scrollHeight与可显示行数乘行高做的对比。

使用方法：

<style>
	.content{
		line-height: 20px;
	}
</style>
<div class="content" v-clamp="3">
多行文本多行文本多行文本多行文本多行文本多行
文本多行文本多行文本多行文本多行文本多行文
本多行文本本多行文本本多行文本本多行文本多行文本
</div>

vue模版语法多行省略代码如下：

directives: {
        clamp: {
            // 指令的定义
            inserted: function (el, binding) {
                var boxid = el;
                var tempstr = el.childNodes[0].nodeValue;
                var computedStyle = document.defaultView.getComputedStyle(boxid, null);
                var lineHeight = computedStyle.lineHeight;//获取行高
                var top = binding.value * Math.ceil(lineHeight.replace('px', '')) + 5;
                var len = tempstr.length;
                var i = 0;
                if (boxid.scrollHeight <= top) {
                } else {
                    var temp = "";
                    boxid.childNodes[0].nodeValue = temp;
                    while (boxid.scrollHeight <= top) {
                        temp = tempstr.substring(0, i + 1);
                        i++;
                        boxid.childNodes[0].nodeValue = temp;
                    }
                    var slen = temp.length;
                    tempstr = temp.substring(0, slen - 1);
                    len = tempstr.length;
                    boxid.childNodes[0].nodeValue = tempstr.substring(0, len - 2) + "...";
                    // boxid.height = top + "rem";
                }
            },
        },
    },

js多行省略代码如下：

提示：因为js版，可能会因为个人的疏忽，找不到需要设置多行省略的节点，所以我们需要多加一层判断。

/**
必填：
el:dom节点,
binding:行数限制
选填：
defaultValue:展示内容
*/
function ellipsis(el, binding, defaultValue) {
    try {
        var boxid = el;
        if (el.childNodes.length > 0) {
            boxid.childNodes[0].nodeValue = defaultValue || el.childNodes[0].nodeValue;
            var tempstr = el.childNodes[0].nodeValue;
            var computedStyle = document.defaultView.getComputedStyle(boxid, null);
            var lineHeight = computedStyle.lineHeight;//获取行高
            var top = binding * Math.ceil(lineHeight.replace('px', '')) + 5;
            var len = tempstr.length;
            var i = 0;
            if (boxid.scrollHeight <= top) {
            } else {
                var temp = "";
                boxid.childNodes[0].nodeValue = temp;
                while (boxid.scrollHeight <= top) {
                    temp = tempstr.substring(0, i + 1);
                    i++;
                    boxid.childNodes[0].nodeValue = temp;
                }
                var slen = temp.length;
                tempstr = temp.substring(0, slen - 1);
                len = tempstr.length;
                //如果需要删除的字节数小于等于1，那么就需要删除两位字符，反之只删除1位
                //因为被替换的【...】所占是2位字符
                var glen = tempstr.substring(len - 1, len).gblen() <= 1 ? 2 : 1;
                boxid.childNodes[0].nodeValue = tempstr.substring(0, len - glen) + "...";
            }
        }
    } catch (e) {
        console.log(e)
    }
}
//判断当前字符的字节数
function gblen(val) {
    var len = 0;
    for (var i = 0; i < val.length; i++) {
        if (val.charCodeAt(i) > 127 || val.charCodeAt(i) == 94) {
            len += 2;
        } else {
            len++;
        }
    }
    return len;
}