自动调整字体大小适用容器宽度

最新推荐文章于 2023-12-01 20:24:49 发布

宁无竹

最新推荐文章于 2023-12-01 20:24:49 发布

阅读量880

点赞数

分类专栏：细节研究 javascript 文章标签： javascript

本文链接：https://blog.csdn.net/suxianbaozi/article/details/108348775

版权

细节研究同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

javascript

29 篇文章 0 订阅

订阅专栏

自动调整字体大小适用容器宽度

经常遇到标题里的内容不固定的情况，用三个点来兼容，效果还不是太完美，如果，文字太多，字符自动变小，就可以很完美的解决问题

1、首先我们需要有一个方法获取字符占用的宽度，通过字符的长度来计算肯定很不准，
正好canvas有这个方法measureText,需要指定字体
2、然后我们需要一个循环来不断的尝试我们能用的最大字体是多少

ok 上代码


export  let AutoShrink ={
	getMaxFontSize:function (text,containerWidth,fontFamily,minSize,maxSize) {
		let canvas = document.createElement('canvas');
		let context = canvas.getContext('2d');
		minSize = minSize || 12;
		maxSize = maxSize || 50;

		for(var i=minSize;i<=maxSize;i++){
			context.font = i+"px "+fontFamily;
			let detail = context.measureText(text);
			let width = detail.width;
			if(width === containerWidth) {
				return i;
			}
			if(width>containerWidth) {
				return i-1;
			}
		}
		return i>maxSize?maxSize:i;
	},
	adjust:function (dom,options) {
		options = options || {};
		let text = dom.innerText;
		let containerWidth = parseInt(getComputedStyle(dom).width);
		let fontFamily = getComputedStyle(dom).fontFamily;
		let maxFontSize = this.getMaxFontSize(text,containerWidth,fontFamily,options.minSize,options.maxSize);
		dom.style.fontSize = maxFontSize+'px';
	}
};
export default AutoShrink;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <script src="../dist/auto-shrink.min.js"></script>
</head>

<style>
    #test {
        width: 800px;
        background-color: red;
        font-family: 微软雅黑, Arial, Helvetica, sans-serif;
    }
</style>


<body>
<div class="auto-shrink" id="test" style="">从前有座山，1233hahahh啊哈哈哈哈就啊哈哈啊哈对对是打发斯蒂芬对哈哈，阿看见爱上大路口甲方阿斯顿发的</div>
<script>
	AutoShrink.adjust(document.querySelector('#test'),{
		maxSize:200
    });
</script>
</body>
</html>