vue 实现多行文本溢出的省略

最近遇到需要多行文本溢出的省略的情况；

借助webkit的CSS扩展属性实现这一点固然省事，但是存在浏览器兼容问题，兼容范围仅限于PC端的webkit内核浏览器；

固定宽高，然后用定位的方式固定“...”方式也容易出现一些不美观的情况；

找了好一会，突然发现一篇好文章，里面有大神列举出的比较完善的解决方案，详情可以看【CSS/JS】如何实现单行／多行文本溢出的省略（...）--绕过坑道的正确姿势；

看到最后一个，皮卡丘，决定就是你了！不过还得稍微转化一下变成vue的写法，原来的写法：

HTML：

<div id='view' 
     style='border:1px solid red;
     width:200px;
     height:70px;
     overflow:auto'>
</div>

JS：

s = '这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本这是一个文本'
el = document.getElementById('view');
n = el.offsetHeight;
for(i=0; i<s.length; i++) {
  el.innerHTML = s.substr(0, i);
  if(n < el.scrollHeight) {
    el.style.overflow = 'hidden';
    el.innerHTML = s.substr(0, i-3) + '...';
    break;
   }
}

转变后的写法：

HTML：

<div ref='view' 
     style='border:1px solid red;
     width:200px;
     height:40px;
     overflow:auto'>
</div>

js：

<script>
    export default {
        data() {
            return {
                content: "这是一段示例代码片段，这是一段示例代码片段，这是一段示例代码片段",
            }
        },
        methods: {
            handleContent() { 
                let text = this.content,
                    el = this.$refs.view,
                    h = el.offsetHeight;
                for(let i = 0; i <= text.length; i++) {
                    el.innerHTML = text.substr(0, i);
                    if(h < el.scrollHeight) {
                        el.style.overflow = 'hidden';
                        el.innerHTML = text.substr(0, i-3) + '...';
                        break;
                    }
                }
            }
        },
        mounted() {
            this.handleContent();
        },
    }
</script>

稍微需要留意的是，触发函数的地方，不能为$refs不能读取的情况；