平时工作中遇到工具函数总结(持续更新中...)

这里写目录标题

  • 获取某个字符串的宽度(px)
  • 截取指定宽度(px)的字符串+ ...

获取某个字符串的宽度(px)

   getTextWidth(text) {
      // 创建临时元素
      const _span = document.createElement('span')
      // 放入文本
      _span.innerText = text
      // 设置文字大小
      _span.style.fontSize = '12px'
      // span元素转块级
      _span.style.position = 'absolute'
      // span放入body中
      document.body.appendChild(_span)
      // 获取span的宽度
      let width = _span.offsetWidth
      // 从body中删除该span
      document.body.removeChild(_span)
      // 返回span宽度
      return width
    },

截取指定宽度(px)的字符串+ …

在处理echarts 图表中文案过长,比如图例文案过长,需要超出容器后…显示的时候,特别有用。

/**
   * 根据指定宽度截取字符串
   * @param desc 原始字符串
   * @param width 该显示的宽度
   * @param fontsize 字体大小  12px
   * @returns {string} 截取后的字符串
   */
  getStrByWith (desc, width) {
    var span = document.createElement('span')
    span.id = 'cut'
    span.style.visibility = 'hidden'
    span.style.fontSize = '12px'
    span.style.whiteSpace = 'nowrap'
    document.body.appendChild(span)
    var boo = false
    var temp = '' 
    var temp1 = '' // 存放截断字符串
    for (var j = 0; j < desc.length; j++) {
      // desc是目标字符串,
      temp += desc[j]
      span.innerText = temp

      if (span.offsetWidth <= width) {
       temp1 = temp
      }else{
        // 超出就不添加这个字符串
        boo = true
        break
      }
    }
    document.body.removeChild(span)
    if (boo) temp1 += '...'
    return temp1
  },

你可能感兴趣的:(echarts,javascript,ecmascript)