响应字体大小 - 适合容器

Question

我遇到了一些情况，其中有一个大于其包含div的单词。请看下面的截图：

我想要发生的事情是，当一个单词太大而无法容纳在其包含的div中时，它会缩小尺寸直到它适合。使用上面的屏幕截图，我希望它在调整大小时看起来像这样：

我该怎么做？

我read关于视口大小的排版，但它不会与div相关。如何创建与div相关的可缩放字体？

我更喜欢只有CSS的解决方案，但如果JS是唯一的方式，那么我会接受这个答案。

Answer 1

我从未见过这种纯CSS解决方案，但我见过一些JS解决方案：

Auto-size dynamic text to fill fixed size container

您可以尝试FitText.js