Javascript 如何减小字体大小以适应数组中DOM元素的固定高度容器？

我有一个项目，它从网格中提取内容并显示新闻故事

我正在尝试编写一个脚本，以减小标题标记上的字体大小，直到文本适合其父项

我在下面的代码片段中使用了一个while循环，但它似乎只在元素循环时减小元素的大小一次

如何在每次迭代中继续减小该值？或者有人知道更好的方法来实现这个结果吗

我以前只尝试使用它，它似乎将所有元素更改为相同的字体大小

window.onload=调整大小以适应； 函数调整大小以适应{ const CONTAINERS=document.queryselectoral.headline-container； const headlineexts=document.getElementsByClassName'headline'； 对于i=0；i容器高度和计数>0时{ //这似乎只发生一次； headline.style.fontSize=fontSize-1+px； 计数-； } }

---

} 您的缓存值在内部循环的每次迭代中都没有改变，这意味着您每次都在比较所有相同的值，并且最终总是得到相同的结果

如果不缓存不需要缓存的值，请使用确实需要缓存的值，即代码中从未使用过标题和容器，并直接从内部循环访问这些值，则不会出现问题

作为最后一点，最佳实践通常是相当主观的，并且易于解释，所以我不会告诉你应该如何做简单的事情，但无论你做什么。。。请保持一致

const containers=document.getElementsByClassName'headline-container'； const headlines=document.getElementsByClassName'headline'； 对于i=0；i.长度；i++{ const headline=标题[i]； 常量容器=容器[i]； 让计数=15； 而headline.offsetHeight>container.offsetHeight&&count>0{ const fontSize=parseIntwindow.getComputedStyleheadline.fontSize； headline.style.fontSize=fontSize-1+px； 计数-； } } .headline容器{高度：30px；溢出：隐藏；边框：1px实心}h1{边距：0}

---

Hello WorldNope，它运行了15次，但新的字体大小始终相同。您必须在while循环中进行计算。