Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

https://www.bootply.com/aPCwXvwXws

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

Answer 1

如果您希望文字位于缩略图的边框内，则可以将SharedPreferences添加到缩略图div。

如果您想multi-line ellipsis this demo 那你的CSS应该是这样的：

display: table;

Bootstrap - 在固定高度的缩略图中拟合标题文本

1 个答案: