Question

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

会有换行符
如果足够（垂直居中）只有一行
如果两条线太多而

目前，我的按钮创建如下：

<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;
}

因此，如果名称太长，我会在结尾处得到省略号（...）。我发现另一个问题显示有换行符，但我不能将行数限制为两行： Twitter Bootstrap Button Text Word Wrap

我想要的三个例子：

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

Answer 1

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

Bootstrap：最多两行的按钮

1 个答案: