<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态获取fontSize</title>
<style type="text/css">
.box {
width: 70px;
background: #222222;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #ffffff;
font-size: 100px;
}
</style>
</head>
<script>
window.onload = function() {
let box = document.getElementById('box')
function getFontSize(str = '666,666.66', targetSize = 20) {
let boxWith = box.offsetWidth;
let fontSize = targetSize;
let theCanvas = null;
let practicalWidth = getWidth(str, fontSize)
function getWidth(text, size) { // 使用canvas计算字符串展示所需宽度
let font = `normal ${size}px Microsoft YaHei`
const canvas = theCanvas || (theCanvas = document.createElement('canvas'));
const context = canvas.getContext('2d');
context.font = font;
return Math.floor(context.measureText(text).width)
}
while ((10 <= fontSize) && (practicalWidth > boxWith)) { // 所需宽度小于实际宽度，或者计算字体大于最小字体10
fontSize -= 2
practicalWidth = getWidth(str, fontSize); // 重新计算目标字符串所需宽度
boxWith = box.offsetWidth - getWidth('...', fontSize); // 文本溢出剔除...所占距离
if (practicalWidth< boxWith) {
break
}
}
return fontSize; // 输出fontSize
}
box.style.fontSize = `${getFontSize()}px`
}
</script>
<body>
<div id="box" class="box">666,666.66</div>
</body>
</html>
6558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
