React - 动态字体大小以占用所有可用空间

Question

我正在尝试在我的 Next.js 项目中创建这样的布局：

中间会有一个单词、一个图像，然后是另一个单词，如上所示。我需要动态设置字体大小以占用所有可用空间。我该怎么做？

Answer 1

textFit 这是一个 JavaScript 库，可以调整字体大小以使文本适合容器。

fitty是另一个JS库调整类型大小以水平最大化

您可以在这里找到更多选项，并选择最适合您的选项。 链接

Answer 2

有一篇文章展示了很多方法来做到这一点。

https://css-tricks.com/fitting-text-to-a-container/

您可以看看的图书馆：

反应规模文本

健身

反应适合

文字适合

反应文本适应

自动文本大小