Question

我使用的是MaterialiseCSS，我希望能够让按钮中的长文本显示在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>

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

有解决方案吗？谢谢！

Answer 1

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

.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 2

从这里删除高度：

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

Answer 3

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

height:auto !important;

MaterialiseCSS：按钮中的两行

3 个答案: