使用js控制文字大小自动适应div不换行,div中文字字号自动调整大小以适应固定宽度

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sysdzw/article/details/81137839
//将文字从指定的字号范围逐个尝试,然后计算宽度跟预期的做比较,如果合适就终止,取当前的字号。
//resetFontSize($(".c2"), 190, 8, 17);
function resetFontSize(divWord, maxWidth, minSize, maxSize) {
	divWord.css('font-size', minSize + "px");
	for (var i = minSize; i < maxSize; i++) {
		if ($(divWord).width() > maxWidth) {
			$(divWord).css('font-size', (i - 2) + 'px');
			break;
		} else {
			$(divWord).css('font-size', i + 'px');
		}
	}
};

函数调用方式:resetFontSize($(".c2"), 190, 8, 17);

主要就是4个参数:要处理的元素、所允许的最大宽度、用于循环逐个尝试的最小字号、最大字号

注意:宽度和大小不要加px,然后div的css中不要给他指定width:xxx,js需要逐个设置div中的字号,这样div宽度自动调整的。期望的宽度放在函数调用中。

展开阅读全文

没有更多推荐了,返回首页