j進來產品提了個需求,文本超出的時候,自動縮小字體 以達到所有展現的效果,下面來看看吧!bash
<div class="cont">
<div class="c2" id="str">我是文文</div>
<div class="c2" id="str">文字無痕變小,漂亮的文文啊</div>
<div class="c2" id="str">文字無痕變小,漂亮的文文啊文文文文~</div>
</div>複製代碼
var len = document.getElementsByClassName("c2");
var size = 18;
for (var i = 0; i < len.length; i++) {
var fontLen = len[i].innerHTML.length;
for (size = 18; size > 8; size--) {
if (size * fontLen < len[i].offsetWidth || size == 9) {
len[i].style.fontSize= size+"px" ;
break
}
}
}複製代碼
下面是效果~字體