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

Question

我有一个元素正在从 contentful 中提取内容并在网格中显示新闻报道。

我正在尝试编写一个脚本来减小 header 标签上的字体大小，直到文本适合其父标签。

我在下面的代码片段中使用了 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>