javascript - 根据字符串长度使用纯 JavaScript 调整字体大小

Question

我知道这个问题被问过多次，但我的情况不同。我注意到使用纯 JavaScript 解决方案，需要调整屏幕大小，而我的完全没有调整屏幕大小.

我有一个容器 div，里面有一些文本。所有文本都有一定的字体大小，但我想在文本达到一定长度时更改字体大小。

我在 SO 上看到了这个解决方案: Resize font depending on string length

然而，这在纯 JavaScript 中看起来绝对可怕，而且这是三年前的帖子。肯定有一个更好(更短，更好)的解决方案。我已经阅读了 CSS 解决方案，但正如我所说:我没有使用某个视口(viewport)，我也不想使用。我只是想在太长的时候更改字体大小。

我做了一个 JSFiddle 来说明这个问题:

https://jsfiddle.net/tpx71aqL/

<div class="test">
Blablabla
</div>

<div class="test">
Blablabla12124e121211asdasasas
</div>

PS:我不会使用 jQuery，也不想使用省略号。

Answer 1

这个解决方案的想法实际上非常简单。查看我的代码笔 here .

使用一个简单的 while 循环来检查 clientWidth 和 scrollWidth，您可以了解更多关于 here 的信息，我们使用 javascript .style.fontSize = "smaller" 将字体大小减小 1 个单位。当我们不知道 CSS 中指定的单位时，这种方法很有效。您可以阅读更多相关信息 here .

希望这对您有所帮助。

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    var container = document.getElementById("test");
    while (container.scrollWidth > container.clientWidth) {
      container.style.fontSize = "smaller";
    }
  }
};

.test {
  width: 200px;
  border: 1px solid black;
  font-size: 16px;
}

<div class="test">
Blablabla
</div>

<div class="test" id="test">
Blablabla12124e121211asdasasas
</div>