根据div宽度调整字体大小

Question

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

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

div是100px宽。因此，键入的文本越多，字体大小应该越小，如果删除一些字符，则大小应该增大。

到目前为止，这种方法很有效，但是很丑陋。过渡是不时“跳跃”。

有关如何修复它的任何提示？ ： - ）

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

Answer 1

嗯......你可以做到以下几点。

创建一个位于用户视图之外的div。 将文本放入其中，然后在将文本放入其中时获取其大小。 然后你可以看到它得到的大小并适当地缩小它，而不是那么做大腿的计数...... 顺便说一句，这是越野车.. 就我所知，它会像地狱一样跳出不均匀或偶数。

Answer 2

在这里查看一下官方文档，这些是你在css中的相对单位。 http://www.w3.org/TR/css3-values/#font-relative-lengths

您可以使用视口测量执行某些操作，具体取决于您的确切目标。

Answer 3

当然，只需使用百分比。

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

http://jsfiddle.net/gsFx7/

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

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

应该更顺畅。