微信小游戏 文字溢出处理方案，使用省略号

因为小游戏是使用canvas进行文字绘制，无法使用css的方式进行处理，必须使用js进行处理。下面是使用工具进行处理。

工具方法

  // 文字溢出处理函数
  spliteWord (content) {
    let templateWord = ''
    /* 自定义文字内容长度 */
    const len = 10 // 默认10个字符长度
    if (content.length * 2 <= len) {
      return content
    }
    /* 用于记录文字内容的总长度 */
    let strLength = 0
    for (let i = 0; i < content.length; i++) {
      templateWord += content.charAt(i)
      /* charCodeAt()返回指定位置的字符的Unicode编码，值为128以下时一个字符占一位，当值在128以上是一个字符占两位 */
      if (content.charCodeAt(i) > 128) {
        strLength = strLength + 2
        if (strLength >= len) {
          return templateWord.substring(0, templateWord.length - 1) + '...'
        }
      } else {
        strLength = strLength + 1
        if (strLength >= len) {
          return templateWord.substring(0, templateWord.length - 2) + '...'
        }
      }
    }
    return templateWord
  }

方法调用

 let textStr = spliteWord('测试调用文字溢出截断')
 const ctx = wx.createCanvasContext() // 创建context对象
 ctx.fillStyle = '#72291e'
 ctx.font = 'bold 28px'
 ctx.textAlign = 'left'
 ctx.fillText(textStr, 100,100,100) // 绘制文本