根据div宽调整字体大小

Question

我尝试调整相对于父div的字体大小。

看到这个小提琴： http://jsfiddle.net/hFgMs/

股利是100px的宽。所以你输入的文字越多，字体大小应该越小，如果你删除一些字符，大小应该增加。

这工作到目前为止，但丑陋地狱。这些转变不时会“跳跃”。

有关如何解决它的任何提示？ :-)

Auto-size dynamic text to fill fixed size container 做到了。谢谢

Answer 1

当然，只是使用百分比。

使用百分比而不是像素来定义文本字段中字体的大小。

http://jsfiddle.net/gsFx7/

div{ 
    font-size:100%; 
    -webkit-transition:all 300ms; 
} 

div:hover{ 
    font-size:200%; 
} 

应该是平滑的。

Answer 2

那么......你可以做以下事情。

创建一个在用户视图之外的div。 将文本放入其中，然后在放入文本时获取它的大小。 然后，你可以看到它得到的大小，并正确地将其缩小，而不是计数thighy ... 这是越野车的方式.. 它跳起来像地狱不平或甚至数字，据我所知。

Answer 3

看看这里的官方文档，这些是你在CSS中的相关单元。 http://www.w3.org/TR/css3-values/#font-relative-lengths

根据您的确切目标，您可能可以使用视口测量进行一些操作。