Javascript 自动调整跨距的字体以适合div

我有两个

span

s应该放在一个div中。第一个合适，但第二个不合适。我需要的是以编程方式调整字体大小以适应div。我需要使用CSS或Javascript来实现这一点。这可能吗

HTML

div.div1{
高度：120px；
宽度：120px；
背景颜色：橙色；
}
span.span1{
字体系列：Verdana；
字体大小：36px；
字体大小：粗体；
}

1234


12345

下面是我如何使用递归函数来实现它。不确定这是否是最佳答案，但它确实有效

//这是一个递归函数，当内部跨度足够小时停止
函数checkOverflow（容器）{
const child=container.children[0]
if（child.offsetWidth>container.offsetWidth）{
//仅适用于px大小，对于其他单位，您必须修改此值
child.style.fontSize=parseInt（window.getComputedStyle（child.fontSize）-1+'px'
支票溢出（容器）
}
}
const containers=document.querySelectorAll（'.div1'）
containers.forEach（checkOverflow）

div.div1{
高度：120px；
宽度：120px；
背景颜色：橙色；
}
span.span1{
字体系列：Verdana；
字体大小：36px；
字体大小：粗体；
}

1234


12345

很难看，我很抱歉。但这可能是您的解决方案（为了简单起见，使用jQuery）

$（'.div1'）。每个（函数（）{
设$child=$（'.span1'，$（this））；
设电流=3；
$child.css（'font-size'，current+'em'）；
而（$child.width（）>=$（this.width（））{
电流-=0.1；
$child.css（'font-size'，current+'em'）；
}
})

div.div1{
高度：120px；
宽度：120px；
背景颜色：橙色；
}
span.span1{
字体系列：Verdana；
字体大小：36px；
字体大小：粗体；
}

1234


12345

如果您不想自己编写代码，还有一些jQuery插件：

也许你可以看看jquery.fittext.min.js的代码，它看起来很简单：

(function(a){a.fn.fitText=function(d,b){var e=d||1,c=a.extend({minFontSize:Number.NEGATIVE_INFINITY,maxFontSize:Number.POSITIVE_INFINITY},b);return this.each(function(){var f=a(this);var g=function(){f.css("font-size",Math.max(Math.min(f.width()/(e*10),parseFloat(c.maxFontSize)),parseFloat(c.minFontSize)))};g();a(window).on("resize.fittext orientationchange.fittext",g)})}})(jQuery);

以下是BigText的示例：

.div1{
高度：120px；
宽度：120px；
背景颜色：橙色；
文本对齐：居中；
}
.span1{
字体系列：Verdana；
字体大小：36px；
字体大小：粗体；
显示：内联块；
}

1234


12345678
$（“#适应”）.fitText（1，{minFontSize:'8px'，maxFontSize:'256px'}）；

您的答案不使用jQuery，这正是我想要的，谢谢。