Question

我用一些图片制作了缩略图。我使用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>

Answer 1

这里有两种可能性：

强制使用height，overflow和text-overflow

的单行标题

或使用某种clearfix

清除每4个项目后的浮动

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

Answer 2

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

如何显示长标题（bootstrap）

2 个答案: