zoukankan      html  css  js  c++  java
  • 怎么让列表的文字只显示两行,多出的出现省略号?

    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>
    

     

     

  • 相关阅读:
    【微服务架构】SpringCloud之Ribbon
    SpringCloud之Eureka(注册中心集群篇)
    Eureka简介
    两行代码 搞定计数
    HBase详细概述
    电商项目介绍---说的很好
    面试:----Nginx的一理解
    redis介绍
    Linux操作系统介绍
    什么是Solr
  • 原文地址:https://www.cnblogs.com/antyhouse/p/8867455.html
Copyright © 2011-2022 走看看