在页面中经常遇到文本过长,超出部分显示省略号,鼠标滑过文本出现提示框的情况,但是我每次用都会忘记,现在记录下来,以供下次遗忘时查阅。 第一种:
//计算字符长度
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
第二种:暂未整理