我如何降低字体尺寸以适合固定高度容器，以适合数组中的DOM元素

Question

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

我正在尝试编写一个脚本以降低标题标签上的字体大小，直到文本适合其父为止。

我在下面的摘要中使用了一段时间循环，但它似乎只会在循环循环时降低元素的大小。

如何继续降低每次迭代的值？还是有人知道一种更好的方法来实现这一结果？

我以前尝试使用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>