Question

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

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

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

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

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

＆＃13;

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--;
    }
  }
}

＆＃13;

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--;
    }
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

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

1 个答案: