将对齐的文本大小自动更改为div

Question

我一直在使用https://github.com/davatron5000/FitText.js尝试重新创建此效果http://i.imgur.com/2sfWcDy.png。基本上，我希望div内的每个单词和短语自动增加/减小大小以适应div的宽度。

我遇到了换行符和文本没有完全填充div的问题，而且更长的单词悬挂在div的边界之外而不是完全嵌入div内部。例如，“Sean Connery”这一行看起来像

肖恩

康纳利

而不是

肖恩

康纳利

其中列的宽度等于单词“Connery”。有没有办法来解决这个问题？我知道我可以手工完成，但这很乏味，我将来会做很多这些报纸风格的头条新闻。

Answer 1

我最近这样做了，我也开始使用FitText.js。我最终制作了自己的东西，这很容易。

在您的代码中：

• 创建一个测试容器，浏览器将呈现但不显示，因为您将其置于屏幕外

• 然后将文本添加到测试容器中并递增文本大小，直到文本使容器大于所需容量。

您需要在更改文本大小之间短暂休息，以便浏览器可以呈现更改。我这样做是通过在一个循环中运行我的代码，递归调用setTimeout，直到找到足够大的文本大小。