单行文本溢出自适应大小

最新推荐文章于 2022-03-07 22:36:10 发布

weixin_33840661

最新推荐文章于 2022-03-07 22:36:10 发布

阅读量387

点赞数

原文链接：https://juejin.im/post/5c95d190e51d452fae534183

版权

j进来产品提了个需求，文本超出的时候，自动缩小字体以达到全部展示的效果，下面来看看吧！

<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
			}
		}
	}复制代码

下面是效果~

转载于:https://juejin.im/post/5c95d190e51d452fae534183