Css for search results list - Bootstrap

Question

I'm working on displaying search results on a web page. This web page is using twitter bootstrap, but I could not find any bootstrap ready-to-go style for what I wanted. However, I'm not very experienced using twitter bootstrap so there might be something that I'm not aware of.

Since I did not find any twitter bootstrap stuff that suited my needs I have tried the following:

<div id="searchResults" class="inner-content">
    <ul class="multiColumn">
        <li class="userPresentation userid2">
            <a class="removeFromShortList close" href="#" title="shortlist.searchResult.removeFromShortListLabel">
                <i class="icon-minus-sign"></i>
            </a>
            <div class="userContent">
                <img class="img-rounded pull-left" src="/assets/img/default_avatar_50x50.png" alt="profileImage">
                <a href=" /viewProfile/2" class="userName" title=" Single line">
                    Single line
                </a>
            </div>
        </li>
    </ul>
</div>

With a CSS that looks like this:

.inner-content { /* border */
    margin-bottom: 14px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    overflow: hidden
}
ul.multiColumn,ul.multiColumn li {
    margin: 2px;
    padding: 0px;
}
ul.multiColumn li.userPresentation {
    display: inline-block;
    min-height: 54px;
    max-height: 54px;
    width: 150px;
    max-width: 150px;
    background-color: #eee;
    line-height: 13px;
}
ul.multiColumn li.userPresentation .userContent {
    margin: 2px;
    font-size: 12px;
}

This seems to work fine, except for this:

1. If one of the user names are wrapped on to two or more lines, those that do not are pushed down as show on the picture below.
2. I would like the overflowing text to be hidden and a ... to be displayed. Here I probably need to use a jquery plugin?
3. I am no able to center the user names vertically.

This is the result on some test data:

If there are any CSS or Bootstrap Guru's out there, I would very much appreciate a helping hand here. If there's any nice Bootstrap way to show such data that takes media-width into account, that would be super ;)

Answer 1

1. Just add vertical-align: bottom;:

   ul.multiColumn li.userPresentation {
       display: inline-block;
       min-height: 54px;
       max-height: 54px;
       width: 150px;
       max-width: 150px;
       background-color: #eee;
       line-height: 13px;
       vertical-align: bottom;
   }
   

2. For the overflow ellipsis, use this:

   ul.multiColumn li.userPresentation .userContent a {
       display: inline-block;
       white-space: nowrap;
       width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       vertical-align: center;
   }
   

3. After applying the above, it becomes vertically centered.