//title字体大小自适应,以能完全在限定高度下显示25个不同类型的字符。
function fontAutoMoreLine() {
let textBox = document.getElementById("iconTxt");
let maxHeight = textBox.offsetHeight;
let title = document.getElementById("iconTitle");
let size=6;//设置默认展示高度为6vw;
title.style.fontSize = size + 'vw';
while (title.scrollHeight > maxHeight) {
//当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。
size=size-0.2;
title.style.fontSize = size+ 'vw';
}
}
fontAutoMoreLine();
<div class="iconTxt" id="iconTxt">
<div class="iconTitle" id="iconTitle">
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
</div>
.iconTitle{font-weight:700;font-size:6vw;line-height: 8vw;}
.iconTxt{height:16vw;overflow: hidden;}
效果如图:
单行文字自适应实现看这里