Bootstrap - 在具有固定高度的缩略图中调整标题文本

Question

我想在列中显示具有相同高度的引导缩略图。但是，图像下的标题文本不适合缩略图容器。

.thumbnail {
    height: 350px;
}
  
img {
    height: 256px;
    width: 256px;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="https://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg"><br>
                <div class="caption">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="https://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg"><br>
                <div class="caption">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="https://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg"><br>
                <div class="caption">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="https://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg"><br>
                <div class="caption">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
                </div>
            </div>
        </div>
    </div>
</div>

https://www.bootply.com/aPCwXvwXws

理想情况下，我希望文本到达缩略图容器的末尾时以省略号显示

Answer 1

如果您希望文本位于缩略图的边界内，您可以将display: table; 添加到您的缩略图 div。

如果你想拥有multi-line ellipsis 喜欢this demo 那么你的 CSS 应该是这样的：

.thumbnail {
    height: 350px;
    overflow:hidden;
}    

.caption{
    height: 100px;
    display: block;
    display: -webkit-box;
    line-height: 1.4;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}