如何動態測量字型寬度

2021-08-19 11:31:34 字數 791 閱讀 8231

前幾天由於專案需要,需要把太長的字元省略顯示,滑鼠放上去的時候顯示出來,然後去找了個外掛程式,但是完成之後發現字串沒有出現省略號時,滑鼠放上去也會顯示,這與需求不符,於是想到使用字串長度,也就是字元的個數乘以字型大小和包裹字串的元素相比,發現不對,因為字型的大小並不等於字型寬度,而是等於字型高度,中文的時候寬度和高度相差還不是很大,數字時就更大一點,誤差就更大,符號時寬高相差就更大,誤差就更大。也總是在沒有省略號的時候,滑鼠放上去也會顯示。

所以使用如下辦法:

function 

strpxlength(str)

strpxlength("1");

//8px

strpxlength("1234");

//32px

strpxlength("

鄒");

//16px

strpxlength("

鄒網");

//32px

strpxlength("!");

//8px

strpxlength("!?(");

//24px

canvas中有乙個專門測量字串寬度的方法measuretext。

使用canvas的measuretext測量字串寬度之前,一定要設定你測量的字型大小和字型樣式

首先獲取到所需測量的字串,然後動態建立出canvas元素,獲取到它的上下文context,使用它的字串測量方法measuretext測出實際的字串的寬度,與所包裹的元素的寬度進行比較,再來決定在滑鼠移上去時是否顯示內容

opencv不規則物體寬度測量

標頭檔案 include opencv2 imgproc imgproc.hpp include opencv2 highgui highgui.hpp include include include include define pi 3.1415926 using namespace cv us...

關於js計算非等寬字型寬度的方法

首先在body外插入乙個absolute的容器避免重繪 const svgwidthtestcontainer document.createelement svg svgwidthtestcontainer.setattribute id svgwidthtest svgwidthtestcont...

關於js計算非等寬字型寬度的方法

首先在body外插入乙個absolute的容器避免重繪 const svgwidthtestcontainer document.createelement svg svgwidthtestcontainer.setattribute id svgwidthtest svgwidthtestcont...