计算文本宽度的方法

691 阅读1分钟

在页面中经常遇到文本过长,超出部分显示省略号,鼠标滑过文本出现提示框的情况,但是我每次用都会忘记,现在记录下来,以供下次遗忘时查阅。 第一种:

//计算字符长度
const getTextLen = str => {
  if ( !str ) return
  let str_length = 0
  let str_len = str_length
  for (let i = 0; i < str_len; i++) {
    let a = str.chartAt( i )
    str_length++
    //中文字符的长度经编码后大于4 
    if( escape(a).length > 4) {
      str_length++
    }
  }
  return str_length 
}
//计算字符平均宽度
const getTextRealWidth = (text,style) => {
  const span = document.createElement('span')
  span.innerText = text
  Object.keys(style).forEach(key=>{
    span.style[key] = style[key]
    if(key === 'fontSize' && 'number' === typeof style[key] {
      span.style[key] = String(style[key]0 + 'px'
    }
  })
  document.body.appendChild(span)
  const width = span.offsetWidth
  document.body.removeChild(span)
  return width
}
cosnt charWidthAverage = getTextRealWidth('Wm0123456789',totalStyles)/12
//例文本为:举个例子88
const text = '举个例子88'
const textWidth = getTextLen(text) * charWidthAverage  

第二种:暂未整理