CSS：动态字体大小;跨越整个div的宽度

Question

  

可能重复：
  Auto-size dynamic text to fill fixed size container.

假设我的div高600像素，宽400像素。我希望我的文本在这个中间，并跨越div的整个宽度。 CSS或CSS3中是否有某些内容可以根据用户输入的文本量自动执行此操作？

因此，单词FOO将大于单词FOOBAR，因为foobar将占用更多空间，从而动态调整该文本的大小。

只是想知道;我不确定它是否可能（也可以接受JS解决方案......）

谢谢！

Answer 1

我能想到的一个解决方案是：

假设您只需在框中输入单词FOO即可获得的最大尺寸为200px

因此，创建一个新的隐藏div设置固定宽度600但不是高度，然后循环

1. 新建hidden div
2. 设置width 600并保留高度
3. loop通过javascript缩小字体大小until the height is <= 400

Answer 2

我没有看到如何在不费力的情况下为比例字体（如Arial）执行此操作。每个角色都有不同的宽度。

您可以为Courier New这样的“等宽”字体执行此操作。您必须提取文本，计算字符数并相应地调整字体大小。但是，不同的等宽字体具有不同的宽度，因此您必须有一个宽度与字体的表格。然而，通过一些实验这不应该太难。