文字的多行處理在dom元素中很好辦。但是canvas中沒有提供方法，只有通過擷取指定字串來達到目的。

那麼下面就介紹我自己處理的辦法：

wxml：

<canvas canvas-id='word' id='test'></canvas>

canvas肯定要一個畫板容器啦，記得設定寬高哦，小程式中預設寬高是300px和150px

js：在page中

//處理文字多出省略號顯示
    dealWords: function (options) {
        options.ctx.setFontSize(options.fontSize);//設定字型大小
 

        var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//實際總共能分多少行
        var count = allRow >= options.maxLine ? options.maxLine : allRow;//實際能分多少行與設定的最大顯示行數比，誰小就用誰做迴圈次數
            
        var endPos = 0;//當前字串的截斷點
        for (var j = 0; j < count; j++) {
            
 
var nowStr = options.word.slice(endPos);//當前剩餘的字串
            var rowWid = 0;//每一行當前寬度    
            if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果當前的字串寬度大於最大寬度，然後開始擷取
                for (var m = 0; m < nowStr.length; m++) {
                    rowWid += options.ctx.measureText(nowStr[m]).width;//
 
當前字串總寬度
                    if (rowWid > options.maxWidth) {                        
                        if (j === options.maxLine - 1) { //如果是最後一行
                            options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 18);    //(j+1)*18這是每一行的高度        
                        } else {
                            options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 18);
                        }
                        endPos += m;//下次截斷點
                        break;
                    }
                }
            } else {//如果當前的字串寬度小於最大寬度就直接輸出
                options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18);
            }
        }
    },

（1） measureText（）.width 這是小程式 測量文字尺寸資訊的方法，目前僅返回文字寬度。這裡是官方說明

（2） (j + 1) * 18   中18表示每一行行高是18，這是我自己定義的行高如果這個數值小於定義的字型大小，多半會出現兩行文字重疊的現象，前面的 j+1 表示當前是多少行。整體表示當前行與上一行相比需要加多少距離

（3） 在 j===options.maxLine-1 這個表示最後一行的處理情況裡面   有slice(0，endPos-1)，為什麼這裡要減一，是因為省略號也要佔寬度，大概是11.5的樣子，所以要減掉這個省略號的寬度。因為一般中文字元寬度都和設定的字型大小差不多。如果是英文就要小一點，這裡就沒有考慮這麼精細了。反正減一就是精確度的意思。。。可以自行多減或者少減

（4） endPos += m 表示下一次截斷的時候是從哪裡開始。因為每次去截字串都是最初的字串，並沒有真正意義上的截斷一次之後就是剩下的字串了，所以要把每次截斷的點和上一次截斷的點加上，才是最新一次字串截斷的位置。

（5） 迴圈和判斷使用的有點多，不知道對效能有沒有影響。。。。。。

呼叫的時候：

var ctx = wx.createCanvasContext('word');
var name='窗前明月光，疑是地上霜，舉頭望明月，低頭思故鄉。';
this.dealWords({
    ctx: ctx,//畫布上下文
    fontSize: 16,//字型大小
    word: name,//需要處理的文字
    maxWidth: 100,//一行文字最大寬度
    x: 0,//文字在x軸要顯示的位置
    y: 0,//文字在y軸要顯示的位置
    maxLine: 3//文字最多顯示的行數
})
ctx.draw();

 （1） 這個方法能夠處理一行或者多行的情況，就看maxLine設定的大小了。當然如果設定maxLine為0或者-1，就會不顯示的。。。

看一下效果：

（1） canvas我設定的是200 * 200的大小，其它的設定就是上面呼叫的時候設定的

（1） 這是當maxWidth設定為200px的時候的顯示情況。 

完成 (＾－＾)V