CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Below the Radar
Below the Radar

Reputation: 7635

Bootstrap - Fit caption text in thumbnails with fixed height

I want to display bootstrap thumbnails in column with the same height for each. However, the caption text under the image does not fit into the the thumbnail container.

.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

Ideally, I would like the text to be displayed with ellipsis when it reach the end of the thumbnail container

Upvotes: 0

Views: 326

Answers (1)

Elnoor
Elnoor

Reputation: 3762

if you want the text to be within the borders of thumbnail you can add display: table; to you thumbnail div.

If you want to have multi-line ellipsis like this demo then your css should look like this:

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

Upvotes: 1

Related Questions