文字的多行處理在dom元素中很好辦棋蚌。但是canvas中沒有提供方法岛抄，只有通過截取指定字符串來達(dá)到目的。
微信小程序處理辦法:
wxml:
<canvas canvas-id='word' id='test'></canvas>
canvas畫板容器記得設(shè)置寬高月培，小程序中默認(rèn)寬高是300px和150px.
js:在page中
//處理文字多出省略號顯示 dealWords: function (options) { options.ctx.setFontSize(options.fontSize);//設(shè)置字體大小 var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//實際總共能分多少行 var count = allRow >= options.maxLine ? options.maxLine : allRow;//實際能分多少行與設(shè)置的最大顯示行數(shù)比嘁字，誰小就用誰做循環(huán)次數(shù) var endPos = 0;//當(dāng)前字符串的截斷點 for (var j = 0; j < count; j++) { var nowStr = options.word.slice(endPos);//當(dāng)前剩余的字符串 var rowWid = 0;//每一行當(dāng)前寬度 if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果當(dāng)前的字符串寬度大于最大寬度，然后開始截取 for (var m = 0; m < nowStr.length; m++) { rowWid += options.ctx.measureText(nowStr[m]).width;//當(dāng)前字符串總寬度 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 {//如果當(dāng)前的字符串寬度小于最大寬度就直接輸出 options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18); } } },
（1）measureText（）.width?這是小程序 測量文本尺寸信息的方法杉畜，目前僅返回文本寬度纪蜒。
（2）?(j + 1) * 18中18表示每一行行高是18，這是我自己定義的行高如果這個數(shù)值小于定義的字體大小此叠，多半會出現(xiàn)兩行文字重疊的現(xiàn)象纯续，前面的 j+1 表示當(dāng)前是多少行。整體表示當(dāng)前行與上一行相比需要加多少距離
（3） 在j===options.maxLine-1?這個表示最后一行的處理情況里面? ?有slice(0灭袁，endPos-1)猬错，為什么這里要減一，是因為省略號也要占寬度茸歧，大概是11.5的樣子倦炒，所以要減掉這個省略號的寬度。因為一般中文字符寬度都和設(shè)置的字體大小差不多软瞎。如果是英文就要小一點逢唤，這里就沒有考慮這么精細(xì)了。反正減一就是精確度的意思铜涉。智玻。≤酱可以自行多減或者少減
（4）?endPos += m?表示下一次截斷的時候是從哪里開始吊奢。因為每次去截字符串都是最初的字符串，并沒有真正意義上的截斷一次之后就是剩下的字符串了，所以要把每次截斷的點和上一次截斷的點加上页滚，才是最新一次字符串截斷的位置召边。
var ctx = wx.createCanvasContext('word'); var name='窗前明月光，疑是地上霜裹驰，舉頭望明月隧熙，低頭思故鄉(xiāng)。'; this.dealWords({ ctx: ctx,//畫布上下文 fontSize: 16,//字體大小 word: name,//需要處理的文字 maxWidth: 100,//一行文字最大寬度 x: 0,//文字在x軸要顯示的位置 y: 0,//文字在y軸要顯示的位置 maxLine: 3//文字最多顯示的行數(shù) }) ctx.draw();
摘自:https://www.cnblogs.com/zjjDaily/p/9956848.html
