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

夜雨风亭

已于 2022-04-02 15:04:22 修改

阅读量5.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： css javascript html jquery vue.js

于 2021-03-16 16:06:51 首次发布

本文链接：https://blog.csdn.net/qq_20095005/article/details/114885598

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
  }