您的当前位置:首页正文

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

2024-11-28 来源:个人技术集锦

工具方法

  // 文字溢出处理函数
  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) // 绘制文本
显示全文