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

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

2.原来的样式

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

3.最后

<body>
    <div style="margin-top: 100px;
    margin-left:200px ;
    width: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>

posted on 2018-04-17 16:20 周小姐你好阅读(460) 评论(0) 收藏举报