根据容器宽度减小标签文本大小

Question

我有一个带有显示名称的边栏，问题是如果用户名太长，它将超出容器。我尝试使用Jquery FitText，但除非我做错了什么，否则它似乎并没有实现我想要的功能。即使我更改浏览器窗口的大小并且名称所在的容器没有任何更改，也始终会调用调整大小的函数。有没有办法使文本适合容器而不超出容器？

Answer 1

使用纯CSS实际上是可行的。

这是一篇很棒的文章：https://css-tricks.com/viewport-sized-typography/。

更新

使用纯CSS的问题是文本将始终适合视口。以下自定义解决方案仅在包含框溢出时才更改文本大小：jsfiddle.net/0swbytek