如何減小字體大小以適合數組中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>