前言：由于像素和字體大小缸废，字節(jié)（特別是 UTF-8）等限制因素软能，所以我們不能直接知道一個字符串所占的實際寬度饰潜。
這里提供幾種比較測量方法：
1、通過Canvas測
const getTextWidth = (text:string, font:string = "normal 12pt arial"): number => {
if (!text) return 12;
const canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
const context = canvas.getContext("2d");
context.font = font;
const metrics = context.measureText(text);
return metrics.width;
}
或者
let tCanvas = null;
const getTextWidth = (text:string, font:string = "normal 12pt sans-serif"): number => {
if (!text) return 12;
let canvas = tCanvas || (tCanvas = document.createElement("canvas"));
const context = canvas.getContext("2d");
context.font = font;
const metrics = context.measureText(text);
return metrics.width;
}
使用：
const width = getTextWidth("hello there!", "bold 12pt arial")
console.log('width:', width)
2箕别、通過 DOM 測量铜幽，這種方法在字符串中含有多個空格時滞谢，測出來的寬度會一樣
// 計算單行文本寬度
const getTextWidth = (text: string = "", font: string = "12px"): number => {
if (!text) return 12;
const dom = document.createElement("span") as HTMLElement;
dom.style.display = "inline-block";
dom.style.fontSize = font;
dom.style.whiteSpace = "nowrap";
dom.textContent = text;
document.body.appendChild(dom);
const width = dom.clientWidth;
document.body.removeChild(dom);
return width;
};
3、用個 visibility: hidden 的浮動的層來計算字符串寬度除抛。
在添加的 div 容器里把樣式設置為和你實際的 div 一樣狮杨。
<!DOCTYPE html>
<html>
<head>
<script src='jquery.min.js'></script>
</head>
<body>
<div
id='labelText'
style='color:black; line-height:1.2; white-space: nowrap; position:fixed;
top:0px; left:0px; display:block; visibility:visible;'
></div>
<script>
var str = 'Live like you were dying, Love because you do.';
str = str.substring(0, str.length);
$('#labelText').css({
'font-size': '12px',
'font-family': 'Microsoft YaHei'
}).html(str);
var width = $('#labelText').width();
console.log(width);
</script>
</body>
</html>
計算高度也一樣。
注意：最后別忘了移除額外添加的 div到忽！
點贊加關注橄教，永遠不迷路
