2011-02-17 152 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这样的“等宽”字体这样做。您必须提取文本,计算字符数并相应地调整字体大小。然而不同的等宽字体有不同的宽度,所以你必须有一个宽度与字体的表格。但是,通过一些实验,这不应该太难。