引导:最多两行的按钮

Question

我想拥有具有固定宽度和高度的按钮，自动

1. 如果内容对于一行来说太长，则使用换行符
2. 如果足够，只有一条线(垂直居中(
有两行，
3. 如果两行太多，则末尾带有省略号

目前，我的按钮是这样创建的：

<div class="btn-group-horizontal btn-group-users">
    <a href="/user/5/purchase/" class="btn btn-lg btn-default btn-user">Kim One Two Three Four Five</a>
    <a href="/user/15/purchase/" class="btn btn-lg btn-default btn-user">Kim10</a>
    <a href="/user/16/purchase/" class="btn btn-lg btn-default btn-user">Kim11</a>
    <a href="/user/17/purchase/" class="btn btn-lg btn-default btn-user">Kim12</a>
</div>
.btn-user {
    width: 236px;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
}

因此，如果名称太长，我会在末尾得到一个省略号 (...(。我发现了另一个显示有换行符的问题，但我不能将行数限制为两个：推特引导按钮文本自动换行

我想要的三个例子：

|              | |  Pretty long  | | Extremely long |
|  Short name  | |               | |                |
|              | |      name     | | name that...   |

Answer 1

这完全取决于您需要支持的浏览器，这里有一篇关于它的好文章，有不同的方式： https://css-tricks.com/line-clampin/