前军教程网

通过元素宽度和字数计算得到缩放

简单实现如下：

/**
* 字体最大为视觉要求大小(maxFontSize)；超出缩小字体显示，最小为minFontSize；最小字体时超出部分使用圆点(...);
* params.minFontSize 最小字体
* params.maxFontSize 最大字体
* params.fontSizeUnit 字体单位
* params.dom 元素节点
*/
const setTextFontSize = (params) => {
const { minFontSize = 12, maxFontSize = 18, fontSizeUnit = "px", dom, ...rest} = params || {};
const textLen = dom?.innerHTML?.trim()?.length;
const domWith = dom?.getBoundingClientRect()?.width;
let initFontSize = Math.floor((domWith) / textLen);
const isCutOff = initFontSize < minFontSize;
if (initFontSize <= minfontsize initfontsize='minFontSize;' else if initfontsize>= maxFontSize) {
initFontSize = maxFontSize;
}
initFontSize = fontSizeUnit === "rem" ? initFontSize / 10 : initFontSize;
let styleStr = `font-size:${initFontSize}${fontSizeUnit};`;
if (isCutOff) {
styleStr = `${styleStr}overflow:hidden;white-space:nowrap;text-overflow:ellipsis;`;
}
console.log(textLen,initFontSize,domWith, (domWith) / textLen,textLen,styleStr);
dom.style = styleStr;
}