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

Question

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

JS或CSS解决方案都适合我，没有jquery。

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

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

Answer 1

你可以做的一件事是将标签文本放入div的相似大小，并使用以下CSS属性，然后计算它的scrollwidth，然后编写一个javascript循环并将字体大小减少一些像素，直到你发现它的scrollwidth少了比你想要的宽度。

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

这是否回答了你的问题？或者我应该为您提供完整的例子？