用html5做出来，有点不会

img


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<style>
    body {
        background: #ccc;
    }
    .box {
        width: 260px;
        margin: 0 7px 14px;
        background-color: #fff;
        font-size: 12px;
        padding: 0 14px 11px;
        box-sizing: border-box;

    }
    .box:hover .content span{
        white-space: normal;
    }
    img {
        width: 100%;
    }
    .content {
        width: 234px;
    }
    .content span {
        display: block;
        width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        overflow: hidden;
    }
    .price {
        color: red;
        font-size: 22px;
    }
</style>
<body>
<div class="box">
    <img src="https://kaola-haitao.oss.kaolacdn.com/vangoghTemp202112/b4c935fa32394ca6a26efc81da94ae9e_800_800.jpg?x-oss-process=image/resize,w_262,h_262/quality,q_90/ignore-error,1" alt="">
    <div class="content">
        <div class="price">新人价¥381</div>
        <span>美赞臣第二代蓝臻幼儿配方奶粉3段820克罐装美赞臣第二代蓝臻幼儿配方奶粉3段820克罐装</span>
    </div>
</div>
</body>
</html>

鼠标移入事件，做两种状态，一种是正常排版布局的样式，和其他一样；另一种是这个样式，写到鼠标移入的事件中。