多行文本处理在dom元素中很容易处理。但是canvas中没有方法，只能通过截取指定的字符串来实现。

那么下面我就介绍一下我自己的处理方法：

wxml:

Canvas Canvas-ID=' Word ' ID=' Test '/Canvas Canvas肯定需要一个画板容器。记得设置宽度和高度。小程序中默认的宽度和高度是300像素和150像素

Js:在页面中

//处理文本多余的省略号，显示死字：函数(options){ options . CTX . setfont size(options . font size)；//设置字体大小var all row=math . ceil(options . CTX . measure text(options . word))。width/options . max width)；//总共能分几行？var count=all row=options . maxline？options.maxLine : allRow//实际行数与设定的最大显示行数之比，无论谁小都将作为循环数var end pos=0；//当前字符串的截断点为(var j=0；j计数；j){ var nowStr=options . word . slice(end pos)；//剩余字符串var row wid=0；//每一行的当前宽度if(options . CTX . measure text(now str))。width options . maxwidth){//如果当前字符串宽度大于最大宽度，则开始截取为(var m=0；m nowStr.lengthm){ row wid=options . CTX . measure text(now str[m])。宽度；//当前字符串if的总宽度(rowwidoptions . max width){ if(j===options . maxline-1){//如果是最后一行options . CTX . fill text(nowstr . slice(0，m-1)' . '，options.x，options.y(。//(j 1)*18这是每一行的高度} else { options . CTX . fill text(nowstr . slice(0，m)，options.x，options . y(j 1)* 18)；} end PoS=m；//打断下一个截断点；}}} else {//如果当前字符串宽度小于最大宽度，直接输出options . CTX . fill text(now str . slice(0)，options.x，options . y(j ^ 1)* 18)；}} }，(1) measureText()。宽度这是小程序测量文本大小信息的一种方法，目前只返回文本宽度。这是官方说明

(2) 18 in (j 1) * 18表示每一行的行高是18，是我自己定义的行高。如果该值小于定义的字体大小，两行字可能会重叠，前面的j1表示当前有多少行。整体表示当前行与前一行相比需要添加的距离

(3)在j===options.maxLine-1的处理情况下有切片(0，endPos-1)。为什么要在这里减少一个呢，因为省略号也占用宽度，大概是11.5，所以要减少这个省略号的宽度。因为汉字的宽度几乎和设定的字体大小一样。如果是英文的话，就小一点，所以这里不考虑那么仔细。不管怎样，减一意味着准确。你可以自己或多或少减少

(4) endPos=m表示下一次截断从哪里开始。因为每个截断的字符串都是初始字符串，没有真正意义上的剩余字符串是经过一次截断后的，所以将每次的截断点和最后一次的截断点相加就是字符串的最新截断位置。

(5)循环和判断用的有点多，不知道会不会影响性能。

打电话时：

var CTX=wx . createcanvascontext(' word ')；窗外的月光，会不会已经结霜了？我抬起头来看，发现是月光，又沉了回去，我突然想到了家；This.dealWords({ ctx: ctx，//canvas context fontSize: 16，//font size word: name，//要处理的文本maxwidth: 100，//一行文本的最大宽度x3360 0 0，//要在X轴上显示的文本位置y : 0 0 0，//。(1)这个方法可以处理一行或多行，具体取决于maxLine设置的大小。当然，如果maxLine设置为0或-1，就不会显示。

看效果：

(1) canvas我设置的大小为200 * 200，其他设置都是在上面调用的时候设置的。

(1)这是maxWidth设置为200px时的显示。

摘要

以上是边肖介绍的微信小程序中画布断文和省略号显示功能的处理方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！