Bootstrap: Buttons with, at maximum, two lines

Question

I would like to have buttons with fixed width and height that automatically

1. have a line break if the content is too long for one line
2. only have one line if it is enough (centered vertically)
3. have two lines with an ellipsis at the end if it is too much for two lines

Currently, my buttons are created like this:

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

So, if the name is too long I get an ellipsis (...) at the end. I found another question that shows to have line breaks, but I cannot limit the number of lines to two: Twitter Bootstrap Button Text Word Wrap

Three examples of what I want:

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

Answer 1

It will all depend on which browser you need to support, there is a good article about it here with different ways: https://css-tricks.com/line-clampin/