最近发现一个多行截断好用的方案，很好适配移动端

思路是通过canvas的measureText来计算文字长度，然后按照行数进行宽度裁剪

字号要按照展示的去设置，否则裁剪不准确

computed: {
    comutedWidth () {
      return function (val) {
        // 多行截断，通过canvas的measureText来测量文字总长度，超出的部分截掉
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        ctx.font = '16px Arial';
        var char;
        var tempWidth = 0;
        var componentWidth = 518;// 根据文字父元素的宽度，乘以行数，计算出规定的宽度
        var splitString = '';
        for (let i = 0; i < val.length; i++) {
          char = val[i];
          let charWidth = ctx.measureText(char).width;
          if (char === ' ') { // 空格的宽度量的有些窄了，手动处理一下
            charWidth = 8;
          }
          tempWidth = tempWidth + charWidth; // 累加的文本长度
          // 累加的文字长度超过行数规定的长度后进行裁剪
          if ((tempWidth > componentWidth) && !splitString) {
            splitString = val.substring(0, i) + '...';
          }
        }
        return splitString;
      };
    }
  },

dom里直接调用

<div>{
    
    {comutedWidth(content)}}</div>