根據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

根據您的確切目標，您可能可以使用視口測量進行一些操作。