dom.offsetWidth 获取的是div的宽度
// 通过 measureText 计算
function getActualWidthOfChars(text, size = 14, family = "Microsoft YaHei") {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.font = `${size}px ${family}`;
const metrics = ctx.measureText(text);
const actual = Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight);
return Math.max(metrics.width, actual);
}
测试Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试table自适应</title>
</head>
<body>
<h1>下方内容变化，动态获取长度</h1>
<p id="inner-text" style="width: 520px; overflow: hidden; white-space: nowrap; font-size: 14px;"></p>
<p id="auto-text" style="border: solid 1px red; font-size: 14px;"></p>
<div class="show"></div>
<script>
const textDom = document.getElementById('inner-text')
const autoTextDom = document.getElementById('auto-text')
const showDom = document.getElementsByClassName('show')[0]
setInterval(() => {
textDom.innerText = '海胆 .7~^@，aA'.repeat(Math.random() * 50)
let autoWidth = getActualWidthOfChars(textDom.innerText)
autoTextDom.innerText = textDom.innerText
autoTextDom.style.width = autoWidth + 'px'
// 添加 dom 显示
let pDom = document.createElement('p')
pDom.innerText = `${textDom.offsetWidth} ${autoWidth}`
showDom.appendChild(pDom)
}, 1500)
// 通过 measureText 计算
function getActualWidthOfChars(text, size = 14, family = "Microsoft YaHei") {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
ctx.font = `${size}px ${family}`;
const metrics = ctx.measureText(text);
const actual = Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight);
return Math.max(metrics.width, actual);
}
</script>
</body>
</html>
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
