使按钮垂直增长以适应内容，而不是水平增长

Question

我在本地设置中有所需的行为，但是一旦我导入到 Wordpress 中，事情就发生了微妙的变化，我不知道如何修复它。

本质上，我只想按按钮垂直而不是水平增长。目前，当按钮文本过多时，它会流到 div 之外。

所包含的图片在溢出的图片旁边显示了所需的本地行为。

--我已经逐行浏览了“计算”样式，但看不出是什么原因造成的。好像不是overflow-x/y，少数区别之一

请注意，在图片中，乱七八糟的按钮使用了不同的字体，但我对其进行了更改，但仍然无法正确匹配。

Answer 1

尝试添加white-space: pre-wrap;，在开发者工具中尝试，如果它破折号，则添加!important。

这里有更多参考：

• 在 white-space 中预包装

<块引用>

pre-wrap 保留空白序列。线断于 换行符，在 <br> 处，并根据需要填充行框。

• !important Specificity

<块引用>

!important 例外当重要规则用于样式时 声明，此声明覆盖任何其他声明。 虽然技术上 !important 与特异性无关，但它 直接与之交互。但是，使用 !important 是不好的做法 并且应该避免，因为它使调试变得更加困难 打破样式表中的自然级联。当两个 与 !important 规则冲突的声明适用于 相同的元素，具有更大特异性的声明将是 已申请。

一些经验法则：

- Always look for a way to use specificity before even considering !important
- Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).
- Never use !important when you're writing a plugin/mashup.
- Never use !important on site-wide CSS.

信用转到MDN Web Docs

Answer 2

您可以尝试如下设置显示属性：

.button-class {
    width: 150px;
    display: inline-block;
 }

您需要将 display 设置为 "block" 或 "inline-block" 以传递所需的宽度并使 css 跟随它。