多行截断新方案-canvas-measureText

最新推荐文章于 2024-03-06 10:19:07 发布

踩坑能手阿黄

最新推荐文章于 2024-03-06 10:19:07 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言 html

本文链接：https://blog.youkuaiyun.com/qq_38068508/article/details/129306398

该方法通过canvas的measureText计算文字长度，依据设定的行数和宽度进行截断。在移动端适配中，字号需与展示一致，否则可能影响裁剪精度。示例代码展示了如何在超出规定宽度时插入省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

思路是通过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里直接调用