新零售商城 快打包
当前位置:首页 > 教程中心 > DIV+CSS教程 > HTML5+CSS3

css实现多行超出显示省略号

所属栏目:HTML5+CSS3 时间:2017-05-07 来源:网络 作者:不详 点击:

单行省略号

<div class="test"> asadsadsadsasadasdsadadasa</div>  
lt;pre name="code" class="html">  .test{  
   width: 50px;  
   overflow: hidden;  
   white-space: nowrap;  
   text-overflow: ellipsis;  
 }


多行省略号

<div class="test1"> asadsadsadsasadasdsadadasaasadsadsa  
dsasadasdsadadasaasadsadsadsasadasdsadadasaasadsadsadsasadasdsadadasaa  
sadsadsadsasadasdsadadasaasadsadsadsasadasdsadadasa</div>  
  .test1{  
      height: 60px;  
      width: 50px;  
      display: -webkit-box;  
      display: -moz-box;  
      overflow: hidden;  
      text-overflow: ellipsis;  
      word-break: break-all;  
      -webkit-box-orient: vertical;  
      -webkit-line-clamp:3;  
  }


请站长喝杯咖啡?

站长一直坚持白天工作、晚上熬夜更新素材,付出了巨大的精力和时间,其中的辛酸难以言述。

坚持免积分、免登录、无任何限制下载!如果本站素材对你有用,不妨考虑请站长喝杯咖啡鼓励一下!

标签:
更多>>

一流商城

      SQL Error: select id,title,titleurl,titlepic from sql16css_cn.mall_ecms_shop where firsttitle=1 order by id desc limit 9

    你应该也喜欢这些吧

    共有 0 条评论

    给个评价吧

    验证码: