1.已有元素,获取元素内文本行数
//计算元素内的行数
var line=parseFloat(el.css("height"))/parseFloat(el.css("line-height"));
2.canvas计算文本宽度、行数
注:不同字体、不同尺寸 的文字占用宽度不同
//txt:文字 font:字体 width:一行最大宽度
//计算宽度
function getwidth(txt,font){
var canvas = document.createElement('canvas');
var ctx=canvas.getContext("2d");
ctx.font=font;
return ctx.measureText(txt).width
}
//计算行数
function textline(txt,font,width){
let txts=txt.split("\n");
let line=0;
for(var key in txts){
line += Math.ceil(this.getwidth(txts[key],font)/width);
}
return line;
}
3.粗略计算字符宽度,行数计算同上
正则匹配中文占1个字符宽度,其他(如:英文)占0.5个字符宽度
//text:文字 , font_size:字体大小number , letter_space:字间距number
function getwidth(text,font_size,letter_space){
let cn = text.match(/[\u2E80-\uFE4F\u3002\uff1b\uff0c\uff1a\u201c\u201d\uff08\uff09\u3001\uff1f\u300a\u300b]/ig);
let cn_count = cn?cn.length:0
let other_count = text.length - cn_count;
return (cn_count + other_count / 2)*font_size + (letter_space||0)*text.length
}