Question

我知道这个问题被多次询问，但我的不同。我注意到，使用纯JavaScript解决方案，需要调整大小屏幕，而我的绝对没有与调整屏幕大小有关

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

我在SO上看过这个解决方案： Resize font depending on string length

然而，这在纯JavaScript中看起来非常可怕，而且它是三年前的帖子。肯定必须有一个更好（更短，更好）的解决方案。我已经阅读过有关CSS解决方案的内容，但正如我所说：我没有使用某个视口而我不想这样做。我只想在太长的时候改变字体大小。

我已经制作了一个JSFiddle来说明问题：

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

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

PS：我不能使用jQuery，也不想使用省略号。

Answer 1

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

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

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

This fiddle显示了我在评论中的建议。您提取文本包装器的当前宽度并减小字体大小，直到您有一个相同大小或略小于父级的包装器。

var fit = document.getElementById("fit"),
    wrap = document.getElementById("wrap"),
    step = 0.5,
    currentSize;

while (fit.offsetWidth < wrap.offsetWidth) {
    currentSize = parseFloat(window.getComputedStyle(wrap, null).getPropertyValue('font-size'));
    wrap.style.fontSize = (currentSize - step) + "px";
}

请注意getComputedStyle才能真正获得计算出的尺寸。

你可以通过使减少步骤变得更聪明来改善这一点，而不是一次又一次地减少步骤;例如，计算1px减少量近似包装纸宽度到父宽度的距离，并相应地调整步长。

此外，这确实假设文本确实需要按比例缩小，不进行扩展 - 同样的想法适用。

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

2 个答案: