CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nspo
nspo

Reputation: 1518

Bootstrap: Buttons with, at maximum, two lines

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

Upvotes: 0

Views: 1751

Answers (1)

meldev
meldev

Reputation: 399

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/

Upvotes: 1

Related Questions