如何显示长标题(bootstrap)

时间:2017-06-14 16:33:41

标签: css twitter-bootstrap

我用一些图片制作了缩略图。我使用bootstrap。

在每张图片下面,我想要一个标题。

问题是当标题很大时,它会突破到第二行,使缩略图变得杂乱无章。

这里有什么问题 https://s17.postimg.org/v4116i54f/pic.png

任何人都知道如何解决这个问题?

<div class="col-lg-3 col-sm-6 videoitem">
                                <div class="b-video">
                                    <div class="v-img">
                                        <a href="single-video-tabs.html"><img src="http://domain/cover/7604.jpg" class="img-rounded" width='270' height='169' alt=""></a>
                                        <div class="time">3:50</div>
                                    </div>
                                    <div class="v-desc">
                                        <a href=".html" >title</a>
                                    </div>
                                    <div class="v-views">
                                        27,548 views. <span class="v-percent"><span class="v-circle"></span> 78%</span>
                                    </div>
                                </div>
                            </div>

2 个答案:

答案 0 :(得分:0)

这里有两种可能性:

强制使用heightoverflowtext-overflow

的单行标题

或使用某种clearfix

清除每4个项目后的浮动

如果您不太关心浏览器支持,您也可以尝试使用flexbox实现网格的Bootstrap 4

答案 1 :(得分:0)

您可以为标题添加min-height,也可以像-webkit-line-clamp: 2;一样使用https://stackoverflow.com/a/13924997/7565713