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

最新推荐文章于 2022-06-18 11:32:26 发布

原创最新推荐文章于 2022-06-18 11:32:26 发布 · 1w 阅读

12 ·

CC 4.0 BY-SA版权

学习专栏收录该内容

115 篇文章

订阅专栏

本文介绍了一个JavaScript函数，该函数能够自动调整指定元素内的字体大小，确保文本宽度不超过设定的最大值。通过逐步增加字体大小并检查宽度来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//将文字从指定的字号范围逐个尝试，然后计算宽度跟预期的做比较，如果合适就终止，取当前的字号。
//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宽度自动调整的。期望的宽度放在函数调用中。