2011-02-17 149 views
1

可能重複:
Auto-size dynamic text to fill fixed size container.CSS:動態字體大小; DIV的跨度整個寬度

比方說,我有一個div即600像素高,400像素寬。我希望我的文本在這中間,並跨越div的整個寬度。在CSS或CSS3中有什麼東西可以讓我根據用戶輸入多少文本自動執行此操作?

因此,單詞FOO會比單詞FOOBAR更大,因爲foobar會佔用更多空間,從而動態調整文本大小。

只是想知道;我不確定是否有可能(也可以接受JS解決方案..)

謝謝!

+0

謝謝!我投票結束它。 – Petrogad 2011-02-17 21:38:18

回答

1

一個解決方案,我能想到的是:

讓我們說最大尺寸則只需在框中鍵入單詞FOO已經是200px

因此,創建一個新的隱藏的div設置爲600的固定寬度,但不高度,然後通過

  1. 環路新建hidden div
  2. 設置一個width 600,離開高度
  3. loop通過JavaScript通過減少字體大小until the height is <= 400
0

我不明白你怎麼可以沒有很多的努力比例字體​​(如Arial),做到這一點。每個字符都有不同的寬度。

您也許可以對像Courier New這樣的「等寬」字體這樣做。您必須提取文本,計算字符數並相應地調整字體大小。然而不同的等寬字體有不同的寬度,所以你必須有一個寬度與字體的表格。但是,通過一些實驗,這不應該太難。