html - 改变按钮宽度以适合文本宽度

Question

我有一个按钮，里面有一些文本，文本对于按钮来说太长了，所以它自动换行到下一行。由于我有一个固定的按钮高度，按钮中的第二行文本被隐藏，因为溢出未设置为可见。

example

有没有办法设置按钮改变它的宽度，让它和里面的文字一样长？

我当前的 CSS:

.block .btn {
    background-color: #464646;
    color: #fff;
    border:none;
    height: 30px;
    font-family: 'Segoe UI';
    font-size: 16px;
    cursor: pointer;
}
.block .btn:hover{
    background-color: rgba(40, 40, 40, 255)
}

编辑:

发现我的问题:在 HTML 中实际按钮的 style=""属性中设置了一些宽度的剩余样式。 CSS 本身没有任何问题。无论如何感谢您的回答!

Answer 1

在没有提供更多 CSS 或 HTML 的情况下很难准确地说出...但这可能是由于空格换行造成的，请尝试将 white-space 设置为 nowrap在按钮上

例如

button{
  white-space:nowrap;
}

per MDN

The white-space CSS property is used to to describe how whitespace inside the element is handled.