Javascript 如果字体大小仅通过动画而不是正常调整大小来更改，如何使浏览器不放换行符？

我有一个文本居中的div，它对悬停事件有动画效果。文本大小在动画过程中会发生变化，并且它的新大小仅在几个像素的情况下不适合容器div宽度

以下是演示：

HTML:

---

当我将鼠标移到div上时，我不希望出现这种奇怪的行为。我希望它只为初始字体大小设置换行符。有什么解决办法吗？任何CSS、HTML或Javascript解决方案。

您可以通过变换比例而不是更改字体大小来设置动画

示例代码：

@keyframes link-hover {
    to {
        -webkit-transform: scale(1.22, 1.22);
        -ms-transform: scale(1.22, 1.22);
        transform: scale(1.22, 1.22);
    }
}

由于新字体大小为

27

，旧字体大小为

22

，因此很容易计算所需的比例比（

27/22~=1.227

）

---

我将它放在JSFIDLE中，您可以在其中进行测试：

您可以通过变换比例而不是更改字体大小来设置动画

示例代码：

@keyframes link-hover {
    to {
        -webkit-transform: scale(1.22, 1.22);
        -ms-transform: scale(1.22, 1.22);
        transform: scale(1.22, 1.22);
    }
}

由于新字体大小为

27

，旧字体大小为

22

，因此很容易计算所需的比例比（

27/22~=1.227

）

我将它放在JSFIDLE中，您可以在其中进行测试：

@keyframes link-hover {
    to {
        -webkit-transform: scale(1.22, 1.22);
        -ms-transform: scale(1.22, 1.22);
        transform: scale(1.22, 1.22);
    }
}