一个容器中填值,值太多不换行,而是调小字体大小和行高




{{ text }}
clampLineHeight(text, fontSize) {
    const fanalFontSize = this.clampTextSize(text, fontSize);
    const lineHeightRatio = 1.2; // Adjust this value as needed
    return `calc(${fanalFontSize} * ${lineHeightRatio})`;
},
clampTextSize(text, fontSize){
    const maxFontSize = '14px'; // 限制最大字号
    const minFontSize = '8px'; // 限制最小字号
    const containerWidth = fontSize;
    return `clamp(${minFontSize}, calc(${containerWidth} / ${text.length}), ${maxFontSize})`;
},

实现效果:

甲方单位,原本内容过多,会溢出(换行等),现在会自动缩小字体和行高

一个容器中填值,值太多不换行,而是调小字体大小和行高_第1张图片

你可能感兴趣的:(前端,javascript)