MaterializeCSS：一个按钮中的两行

Question

我正在使用 MaterializeCSS，我希望能够使按钮中的长文本显示在 2 行上而不是被截断。

这是一个清晰的例子： Demo

<a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>juste change the panel size to see what i'm talking about</a>

我已经尝试更改 btn class 的 "line-height" 属性。这很好用，但是如果屏幕足够大，可以在一行中显示内容，文本和图标将粘在按钮的顶部，但我希望它们垂直居中。

有解决办法吗？谢谢！

Answer 1

只需从此处删除高度：

.btn, .btn-large, .btn-flat {
    height: 36px;
}

Answer 2

您可以应用此样式来覆盖现有样式：

.btn.waves-effect {
    height: auto;
    min-height: 20px;
    line-height: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
}

您的示例已更新： http://jsfiddle.net/kgy6j0k5/3/

编辑：图标垂直居中

.btn.waves-effect {
    height: auto;
    min-height: 20px;
    line-height: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 50px;
}

.btn.waves-effect .material-icons {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -10px;
    margin-left: 0;
}

Answer 3

这个对我有用的简单解决方案：

height:auto !important;

MaterializeCSS：一个按钮中的两行

MaterializeCSS : two lines in a button

html

css

materialize