css - Bootstrap - 当标题有 3 行时，列被错误地向下推

Question

我的博客中有一篇列表文章。显示三列。

问题是:当文章标题有 3 行时。如果有 4 篇文章，则列会被下推。

像这样:

article 1            article 2           article 3

                     article 4

应该是这样的:

article 1            article 2           article 3

article 4

我的代码是这样的:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>New trends in web design</h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>10 The article have 2 line, it will break four item in this </h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>

        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>New trends in web design</h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-4 pb-90">
            <div class="post-prev-title">
                <h3>New trends in web design</h3>
            </div>
            <div class="mb-30">
                Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat
            </div>
        </div>
    </div>
</div>

注意:点击run code -> full page to show。

或者看我的笔:https://codepen.io/vanloc/pen/RZqVXR

有什么方法可以解决这个问题吗？

标题由用户定义，我无法控制。

Answer 1

你可以尝试这样的事情。使用这个 Multiline Ellipses

CSS

.post-prev-title h3
{
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 1;/*restricting to 1 line*/
    -webkit-box-orient: vertical;
    overflow: hidden;
}