三种方法 计算 文本宽度 及 文本行数

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
  }