标签:字体 overflow 适应 targe src textbox height max www
//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;}
效果如图:
单行文字自适应实现看这里
javascript实现限定高度下文字随不同设备自适应改变字体大小至字数完全展示
标签:字体 overflow 适应 targe src textbox height max www
原文地址:https://www.cnblogs.com/beileixinqing/p/9847597.html