调整任意长度字符串的大小以适应固定大小的 div

【问题标题】：Resizing an arbitrary length string to fit into a fixed-size div调整任意长度字符串的大小以适应固定大小的 div
【发布时间】：2016-09-17 06:47:13
【问题描述】：

无法找到解决方案。我有一个 100px 宽和 30px 高的带有可变标签的“按钮”div。我希望字体大小自行缩小，以便整个标签文本始终可见。

JS 或 CSS 解决方案都适用于我，只是没有 jquery。

在 Flash 中，我通过检查文本行数解决了这个问题，如果超过 1，则缩小字体大小，直到它全部适合一行。不确定在 javascript 中是否可行。

编辑：不是重复的，那个人有一个可变大小的容器，因此可能有不同的解决方案。

【问题讨论】：

How can I count text lines inside an DOM element? Can I?的可能重复
使用百分比字体大小，如 label { font-size:60%; }

标签： javascript css

【解决方案1】：

您可以在这里做的一件事是使用以下 CSS 属性将标签文本变成与 div 类似的大小，然后计算它的滚动宽度，然后编写一个 javascript 循环并将字体大小减小一些像素，直到您发现它的滚动宽度更小比你想要的宽度。

white-space: pre;
overflow-x: scroll;

我尝试过的小 Javascript 代码

// dummy divelement
var divElement = document.getElementById('#myelement')
var fontSize = 15; // Starting from 15
while(divElement.offsetWidth < divElement.scrollWidth) {
  divElement.style.fontSize = fontSize + "px"
  fontSize--;
}

这是否回答了您的问题？还是我应该为您提供整个示例？

【讨论】：

是的，这就是我需要的！我不得不添加空格：nowrap;到我的 div，因为额外的文本是垂直而不是水平地换行和滚动，但现在效果很好。谢谢：D