Question

我正在努力在网页上显示搜索结果。这个网页使用的是twitter bootstrap，但我找不到任何我想要的bootstrap准备好的样式。但是，我对使用twitter引导程序的经验不是很充实，所以可能会有一些我不知道的事情。

由于我没有找到任何符合我需求的推特自举内容，所以我尝试了以下内容：

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

使用如下所示的CSS：

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

这似乎工作正常，除此之外：

如果其中一个用户名被包裹在两条或更多条线上，那么没有用户名会被按下，如下图所示。
我希望隐藏溢出的文本并显示...。在这里，我可能需要使用jquery插件？
我无法垂直居中用户名。

这是某些测试数据的结果： enter image description here

如果有任何CSS或Bootstrap Guru那里，我非常感谢这里的帮助。如果有任何漂亮的Bootstrap方式来显示考虑媒体宽度的数据，那将是超级的;）

Answer 1

只需添加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;
}

对于溢出省略号，请使用：

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

应用上述内容后，垂直居中。

搜索结果列表的Css - Bootstrap

1 个答案: