zoukankan      html  css  js  c++  java
  • CSS3如何实现超出指定文本以省略号显示效果

    
    

    以下分享实现指定文本超出部分以省略号展示的Demo:

    <style>
    .text1 {
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -moz-text-overflow:ellipsis;
    white-space:nowrap;
    }
    .text2 {
    width:200px;
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    }
    </style>
     
    <div class="text1">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>
     
    <br />
     
    <div class="text2">热卖精选:从子频道(服饰鞋包,亲子,居家,美妆)档期里面挑选出来,库存大于30%的高信价比商品list,数量为50个</div>

    如下图:

  • 相关阅读:
    CentOS7- 配置阿里镜像源
    MySQL学习笔记
    OSI&TCP/IP模型
    加密算法学习
    golang学习笔记
    Redis学习总结整理
    TCP
    HTTP/HTTPS
    HTTP2
    MVCC
  • 原文地址:https://www.cnblogs.com/diyichen/p/5864821.html
Copyright © 2011-2022 走看看