元素宽度固定，根据字符串长度，计算fontSize，缩小字号适配页面
<!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>
總結
以上是生活随笔為你收集整理的元素宽度固定，根据字符串长度，计算fontSize，缩小字号适配页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sensor binning信号及信噪比
- 下一篇： js实现input输入框内容自动格式化工