如何处理div长度的动态增长

Question

我正在浏览一系列产品。我将一个显示为另一个，但是某些产品的名称中的字符比其他产品更多。因此，结果是某些'product blocks'比其他块高。我想对所有人保持相同的高度。

这是我的问题的图片：

这是我的代码：

foreach ($random_products as $random_product) {

    $product_image = unserialize($random_product['images']);

    echo '<div class="item">';
    echo '<img src="'.$product_image[0].'" alt="'.$random_product['name'].'" title="'.$random_product['name'].'">';

    echo '<p>'.$random_product['name'].'</p>';

    if($random_product['on_special'] == '1'){
        echo '<p>From R'.$random_product['special_price'].'</p><br>';
    } else {
        echo '<p>From R'.$random_product['price'].'</p><br>';
    }

    echo '<a href="#" class="btn btn-primary pop-prod-btn">View Product</a>';
    echo '</div>';
}

Answer 1

使用以下代码示例来解决此问题：

PHP / HTML：

echo '<div class="prdt-title"> <p>'.$random_product['name'].'</p> </div>';

CSS：

.prdt-title{
    min-height: 40px;
    max-height:40px;
    overflow: hidden;  
    white-space: nowrap; 
    text-overflow: ellipsis;
}
.prdt-title p{
    overflow: hidden;  
    white-space: nowrap; 
    text-overflow: ellipsis;
}

这将使盒子中所有项目的盒子高度保持固定，并隐藏多余的字符，这些字符将从盒子中溢出。