Mutation Events与多行打点的实现实例页面

CSS代码：

x-ell {
    display: block;
    width: 200px;
    word-break: break-all;
}
x-ell > x-dot::before {
    content: '...';
    position: absolute;
}
x-ell > x-hidden {
    position: absolute;
    clip: rect(0 0 0 0);
    font-size: 0;    
}

HTML代码：

<x-ell rows="2">对于现代浏览器...组合如下。</x-ell>
<p>
    <button onClick="document.querySelector('x-ell').rows = '3';">点击设置rows为3</button>
    <button onClick="document.querySelector('x-ell').innerText = '只有一行啦！';">文字内容变少</button>
</p>
                

JS代码：

/**
 @description 本着演示目的，我们只考虑x-ell内部都是纯文本的情况
 @author zhangxinxu(.com) from https://www.zhangxinxu.com/wordpress/?p=8925
 @licence MIT，保留原作者和出处
 */
[].slice.call(document.querySelectorAll('x-ell')).forEach(function (ell) {
    ell.render = function () {
        var rows = this.rows;
        // 宽度，这里就clientWidth代替，padding之类就先不考虑
        var width = this.clientWidth;
        // 这里我们借助canvas做边界判断
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        // 需要字号和字体
        var computedStyle = window.getComputedStyle(this);
        context.font = computedStyle.fontSize + ' ' + computedStyle.fontFamily;
        
        // 所有文本内容
        var text = this.textContent || this.innerText;
        
        // 字符分隔为数组
        var arrText = text.split('');
        var textInit = '';
        // 当前第几行
        var line = 1;
        // 中断点
        var breakIndex = -1;
        // 点点点的宽度
        var widthDots = context.measureText('...').width;
        
        for (var n = 0; n < arrText.length; n++) {
            var testLine = textInit + arrText[n];
            var metrics = context.measureText(testLine);
            var testWidth = metrics.width;
            if (testWidth > width) {
                if (line >= rows) {
                    // 超出了
                    var lastTextWidth = context.measureText(arrText[n - 1]).width;
                    if (lastTextWidth >= widthDots) {
                        breakIndex = n - 1;
                    } else {
                        breakIndex = n - 2;
                    }                    
                    break;
                } else {
                    textInit = arrText[n];
                    line++;
                }
            } else {
                textInit = testLine;
            }
        }
        
        if (breakIndex != -1) {
            this.innerHTML = arrText.slice(0, breakIndex).join('') + '<x-dot aria-hidden="true"></x-dot><x-hidden>' + arrText.slice(breakIndex - arrText.length).join('') + '</x-hidden>';
        }
    };
    
    // 重新定义rows属性
    Object.defineProperty(ell, 'rows', {
        writeable: true,
        enumerable: true,
        get: function () {
            return this.getAttribute('rows');    
        },
        set: function (rows) {
            this.setAttribute('rows', rows);
            
            // Chrome/Safari不支持DOMAttrModified
            // 可以直接检测属性变化
            if (typeof document.webkitHidden != 'undefined') {
                this.render();        
            }
        }
    });
    
    // 打点显示
    ell.render();
    
    // 开始观察ell元素
    ell.addEventListener('DOMCharacterDataModified', function () {
        this.render();    
    });
    ell.addEventListener('DOMAttrModified', function () {
        this.render();    
    });
});