前几天由于项目需要,需要把太长的字符省略显示,鼠标放上去的时候显示出来,然后去找了个插件,但是完成之后发现字符串没有出现省略号时,鼠标放上去也会显示,这与需求不符,于是想到使用字符串长度,也就是字符的个数乘以字体大小和包裹字符串的元素相比,发现不对,因为字体的大小并不等于字体宽度,而是等于字体高度,中文的时候宽度和高度相差还不是很大,数字时就更大一点,误差就更大,符号时宽高相差就更大,误差就更大。也总是在没有省略号的时候,鼠标放上去也会显示。
所以使用如下办法:
function StrPxLength(str){ var canvas = document.createElement("canvas"); var context = canvas.getContext('2d'); context.font = "16px 宋体";//设置字体大小和字体样式 var text = context.measureText(str); console.log(text.width); } StrPxLength("1");//8px StrPxLength("1234");//32px StrPxLength("邹");//16px StrPxLength("邹网");//32px StrPxLength("!");//8px StrPxLength("!?(");//24px
canvas中有一个专门测量字符串宽度的方法measureText。
使用canvas的measureText测量字符串宽度之前,一定要设置你测量的字体大小和字体样式
首先获取到所需测量的字符串,然后动态创建出canvas元素,获取到它的上下文context,使用它的字符串测量方法measureText测出实际的字符串的宽度,与所包裹的元素的宽度进行比较,再来决定在鼠标移上去时是否显示内容