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

我正在浏览一系列产品。我将一个接一个地显示，但有些产品的名称中的字符比其他产品多。因此，结果是一些

“产品块”

高于其他块。我希望他们的身高保持一致

以下是我的问题的图像：

这是我的密码：

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>';
}

foreach（$random\u产品作为$random\u产品）{
$product_image=未序列化（$random_product['images'）；
回声'；
回声'；
回显“”.$random_product['name']。
”；
如果（$random_product['on_special']='1'）{
回音“来自R.”$random_产品[“特价”]。

；
}否则{
从R.$random_产品['price']回显'。

'；
}
回声'；
回声'；
}

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

PHP/HTML：

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

---

这将使框中所有项目的框高度保持固定，并隐藏将从框中溢出的额外字符。

这里您需要指定一个固定的高度以保持所有项目的高度不变，或者您可以对文本字符串应用限制。请在CSS:

中尝试此操作。例如，item{heigth:5rem；}//谢谢您的回答。我应该在类项目中添加最小高度、最大高度和自动高度吗？
.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;
}