当Div内的宽度增加时，如何使Button不受高度缩小的影响？

Question

我的网站上的div里面有一个按钮标签，当用户将鼠标悬停在它上面时，它的宽度会增加，因此效果会很好。

    btn.onmouseover = function(){this.style.background =  "#07334f"; this.style.width = "100%" ; this.style.right = "4%"}
    btn.onmouseout = function(){this.style.background =  "#123f5b"; this.style.width = "90%" ; this.style.right = "-0.35%"}

然而，当这个按钮里面的文字恰好是正确的长度并且宽度增加时，文字从两行变为一行并创造一种丑陋的风格。

我想知道当宽度增加时是否有办法防止文本从两行变为一行

按钮内的文字将来自此

text inside
button

在一行上出现这样的情况，使按钮尺寸缩小，并扭曲外观，使用户与之交互时很奇怪，因为它会在鼠标上调整大小

 text inside button

Answer 1

btn是type = button的输入元素吗？

相反，您可以使用按钮标记，该标记支持文本中的换行符。

{{1}}

或者只使用一个标签并将其设置为按钮样式。