Question

我的网页部分看起来像

这就是我想要设置此部分的方式。我可以轻松地复制和粘贴更多＆＃34; cell＆＃34;制作更多＆＃34;细胞的元素＆＃34;在它下面的图片和文字。但是，如果其中一个元素上的文本太大，它会移动所有其他元素并弄乱整齐的矩阵设置。

如果文字太大，我宁愿让它被切断并保持矩阵的形状，而不是移动矩阵中的所有元素以为文本腾出空间。我怎么能做到这一点？

我的HTML看起来像这样

            <div class="about_box">
         <div class="container">
            <h3>Our Team</h3>
            <div class="col-md-3 row_1">
                <img src="images/a1.jpg" class="img-responsive" alt=""/>
                <h5><a href="#">nonummy</a></h5>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
                <a href="#" class="btn_2">more</a>
            </div>
            <div class="col-md-3 row_1">
                <img src="images/a2.jpg" class="img-responsive" alt=""/>
                <h5><a href="#">euismod</a></h5>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
                <a href="#" class="btn_2">more</a>
            </div>
            <div class="col-md-3 row_1">
                <img src="images/a3.jpg" class="img-responsive" alt=""/>
                <h5><a href="#">tincidunt</a></h5>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
                <a href="#" class="btn_2">more</a>
            </div>
            <div class="col-md-3 row_1">
                <img src="images/a4.jpg" class="img-responsive" alt=""/>
                <h5><a href="#">laoreet</a></h5>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
                <a href="#" class="btn_2">more</a>
            </div>
            <div class="col-md-3 row_1">
                <img src="images/a4.jpg" class="img-responsive" alt=""/>
                <h5><a href="#">laoreet</a></h5>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
                <a href="#" class="btn_2">more</a>
            </div>
            <div class="col-md-3 row_1">
                <img src="images/a4.jpg" class="img-responsive" alt=""/>
                <h5><a href="#">laoreet</a></h5>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
                <a href="#" class="btn_2">more</a>
            </div>
            <div class="col-md-3 row_1">
                <img src="images/a4.jpg" class="img-responsive" alt=""/>
                <h5><a href="#">laoreet</a></h5>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</p>
                <a href="#" class="btn_2">more</a>
            </div>
            <div class="clearfix"> </div>
         </div>
        </div>

每个具有col-md-3 row_1类的div是矩阵中的单个元素

Answer 1

对于使用（...）表示溢出文本的文本，可以使用文本溢出：省略号。还需要将div的溢出设置为隐藏。然后相应地使用bootstrap网格。

Answer 2

尝试添加此内容：

<style>
.row_1{
height:auto;
max-height:120px;
overflow:hidden;
}
</style>

Answer 3

您可以以％为单位设置宽度。例如：div.container div {width: 20%;}

Answer 4

我通常使用PHP来修剪冗长的文本。看看这个功能：

function smartTrimString($str, $len){
    $str=trim($str);
    if (strlen($str)>$len)
        return substr($str,0,$len)."...";
    else
        return $str;
}

如何防止HTML元素因其他大元素而移动

4 个答案: