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

Question

我有一个项目，该项目从内容丰富的内容中提取内容，并在网格中显示新闻报道。

我试图编写一个脚本来减小标题标签上的字体大小，直到文本适合其父级为止。

我在下面的代码段中使用了while循环，但这似乎只是在元素循环时减小了元素的大小。

我如何继续为每次迭代减小该值？ 还是有人知道实现此结果的更好方法？

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

 window.onload = resize_to_fit(); function resize_to_fit() { const CONTAINERS = document.querySelectorAll(".headline-container"); const HEADLINETEXTS = document.getElementsByClassName('headline'); for (i = 0; i < CONTAINERS.length; i++) { var headline = HEADLINETEXTS[i]; var containerHeight = CONTAINERS[i].offsetHeight; var headlineHeight = HEADLINETEXTS[i].offsetHeight; var headlineLength = HEADLINETEXTS[i].innerHTML.length; var style = window.getComputedStyle(HEADLINETEXTS[i], null).getPropertyValue('font-size'); var fontSize = parseFloat(style); var count = 15; while (headlineHeight > containerHeight && count > 0) { //This only seems to happen once; headline.style.fontSize = fontSize - 1 + "px"; count--; } } } 

 window.onload = resize_to_fit(); function resize_to_fit() { const CONTAINERS = document.querySelectorAll(".headline-container"); const HEADLINETEXTS = document.getElementsByClassName('headline'); for (i = 0; i < CONTAINERS.length; i++) { var headline = HEADLINETEXTS[i]; var containerHeight = CONTAINERS[i].offsetHeight; var headlineHeight = HEADLINETEXTS[i].offsetHeight; var headlineLength = HEADLINETEXTS[i].innerHTML.length; var style = window.getComputedStyle(HEADLINETEXTS[i], null).getPropertyValue('font-size'); var fontSize = parseFloat(style); var count = 15; while (headlineHeight > containerHeight && count > 0) { // this only seems to happen once. headline.style.fontSize = fontSize - 1 + "px"; count--; } } } 

 .headline-container { height: 50px; width: 200px; } h4.headline { font-size: 30px; } 

 <div class="headline-container"> <a href=""> <h4 class="headline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis laudantium maiores culpa eaque eius fuga officia, in nihil nostrum nesciunt porro enim aut, sit quod suscipit repellat quisquam fugit corporis.</h4> </a> </div> <div class="headline-container"> <a href=""> <h4 class="headline">Porro non culpa saepe libero est cumque, quasi, temporibus id optio inventore ut incidunt quaerat a, maiores eaque dignissimos debitis quis. Suscipit facilis beatae tempore iste culpa, dolores dolor quo!</h4> </a> </div> <div class="headline-container"> <a href=""> <h4 class="headline">Ullam asperiores nobis ea, dolor voluptas, consequuntur repellat possimus deserunt quia fuga hic, optio similique sunt delectus autem voluptatem inventore tenetur nulla voluptatum ab nemo culpa. Provident dignissimos veritatis et?</h4> </a> </div> <div class="headline-container"> <a href=""> <h4 class="headline">Eveniet sed explicabo tempore dolorum nesciunt sapiente quasi vel quam consequuntur error, velit ullam quaerat, voluptatibus nobis voluptates, expedita vitae molestias natus laudantium architecto similique odio alias sit magnam! Fugit.</h4> </a> </div> 

Answer 1

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

如果您不缓存不需要缓存的值，请使用需要缓存的值（即，代码中从未使用过headline和container ），然后直接从内部循环访问这些值，没问题。

最后要注意，最好的做法通常是相当主观的，所以我不会告诉你，你应该怎么做简单的事情，不同的解释，但不管你做什么......请保持一致。

 const containers = document.getElementsByClassName('headline-container'); const headlines = document.getElementsByClassName('headline'); for (i = 0; i < containers.length; i++) { const headline = headlines [i]; const container = containers[i]; let count = 15; while (headline.offsetHeight > container.offsetHeight && count > 0) { const fontSize = parseInt(window.getComputedStyle(headline).fontSize); headline.style.fontSize = fontSize - 1 + "px"; count--; } } 

 .headline-container { height: 30px; overflow: hidden; border: 1px solid } h1 { margin: 0 } 

 <div class="headline-container"><h1 class="headline">Hello World</h1></div>