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

最新推荐文章于 2023-02-09 17:15:02 发布

weixin_30398227

最新推荐文章于 2023-02-09 17:15:02 发布

阅读量306

点赞数

文章标签： php

原文链接：http://www.cnblogs.com/antyhouse/p/8867455.html

版权

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>

转载于:https://www.cnblogs.com/antyhouse/p/8867455.html

weixin_30398227

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
怎么让列表的文字只显示两行,多出的出现省略号?

1.首先我们要的需求是这样的:2.原来的样式<body> <div style="margin-top: 100px;margin-left:200px ;width:200px ;height: 100px;"> 西瓜（学名：Citrullus lanatus (Thunb.) Matsum. et Nakai）一年生蔓生藤本；...
复制链接

扫一扫