怎么让列表的文字只显示两行,多出的出现省略号?

1.首先我们要的需求是这样的:

2.原来的样式

<body>
    <div style="margin-top: 100px;margin-left:200px ;200px ;height: 100px;">
        西瓜(学名:Citrullus lanatus (Thunb.) Matsum. et Nakai)一年生蔓生藤本;茎、枝粗壮,具明显的棱。卷须较粗壮,具短柔毛,叶柄粗,密被柔毛;叶片纸质,轮廓三角状卵形,带白绿色,两面具短硬毛,叶片基部心形。雌雄同株。
    </div>
</body>

3.最后

<body>
    <div style="margin-top: 100px;
    margin-left:200px ;
    200px ;
     word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;line-height: 1.2rem;
    height: 2.4rem;">
        西瓜(学名:Citrullus lanatus (Thunb.) Matsum. et Nakai)一年生蔓生藤本;茎、枝粗壮,具明显的棱。卷须较粗壮,具短柔毛,叶柄粗,密被柔毛;叶片纸质,轮廓三角状卵形,带白绿色,两面具短硬毛,叶片基部心形。雌雄同株。
    </div>
</body>

 

 

原文地址:https://www.cnblogs.com/antyhouse/p/8867455.html