單行文本溢出自適應大小

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
			}
		}
	}複製代碼

下面是效果~字體

相關文章
相關標籤/搜索