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

最新推荐文章于 2024-09-11 22:31:16 发布

RumbleWx

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量143

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/rumblewx/article/details/134835491

版权

这篇文章介绍了如何使用JavaScript函数`clampLineHeight`和`clampTextSize`来解决甲方单位内容过多导致的文本溢出问题，通过动态调整字体大小和行高，实现文本在指定宽度下的自适应显示。

摘要由CSDN通过智能技术生成

<!-- clampLineHeight 重计算行高 -->
<!-- clampTextSize 重计算字体大小 -->
<!-- 这里的div高8mm, 宽6cm, 文本为text -->
<div style="height:8mm;width:6cm;text-align:left"><span :style="{ fontSize: clampTextSize(text, '6cm'), lineHeight: clampLineHeight(text, '6cm') }">{{ text }}</span></div>

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})`;
},