引导 - 在缩略图中以固定高度调整字幕文本

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

如果你想拥有像这个演示这样的多行省略号那么你的 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;
}