<!DOCTYPE html>
<html>
<body><h1>HTML5 Canvas 限定文本展示范圍、自動計算縮放字體大小</h1><div id="tips">0</div>
<div id="content">良田千頃不過一日三餐廣廈萬間只睡臥榻三尺良田千頃不過一日三餐廣廈萬間只睡臥榻三尺良田千頃不過一日三餐廣廈萬間只睡臥榻三尺良田千頃不過一日三餐廣廈萬間只睡臥榻三尺臥尺臥尺廈廈萬間只睡臥榻三尺臥尺臥尺萬間只睡臥榻三尺良田千頃不過一日三餐廣廈萬間只睡臥榻三尺良田千頃不過一日三餐廣廈萬間只睡臥榻三尺良田千頃不過一日三餐廣廈萬間只睡臥榻三尺臥尺臥尺廈萬間只睡臥榻三尺臥尺廈萬榻三尺臥尺臥尺榻三間只睡三</div><script>
// 默認字體16px，最多一行顯示18個字，8行。
// 超出范圍后，自動縮小字體。let maxWidth = 2304; // 合法最大寬度（字體為16px、18個字、8行時的寬度）
let minSize = 10; // 限制最小字號（支持縮到最小的字體大小）let eleContent = document.getElementById('content');
let eleTips = document.getElementById('tips'); // 將 eleTips 聲明為全局變量
let content = eleContent.innerText; // 獲取文本內容let fontSize = calculateFontSize(content, minSize, maxWidth);
eleContent.style.fontSize = fontSize + "px"; // 重設字號
eleTips.innerText = '自適應字體大小:' + fontSize + "px";function calculateFontSize(text, minSize, maxWidth) {let fontSize = 16; // 初始字體大小let currWidth = 0;while (true) {const ctx = document.createElement("canvas").getContext("2d");ctx.font = fontSize + "px arial,sans-serif";currWidth = ctx.measureText(text).width;//eleTips.innerText = currWidth; // 在函數內部訪問 eleTipsconsole.log('當前字號:'+fontSize+'px，當前寬度:'+currWidth+'，偏差寬度:'+(currWidth-maxWidth));//console.log(currWidth)if (fontSize <= minSize || maxWidth >= currWidth) {break;}fontSize--;}return fontSize;
}</script>
<style>div#content {width: 290px;height: 170px;border: 1px solid red;font: 16px arial, sans-serif;word-wrap: break-word;}
</style>
</body>
</html>
演示效果：
)
——修飾詞靜態（static）的用法詳解)
