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

      作者:zhanhailiang 日期:2014-10-24

    不做前端非常久了,今天从重构师那里了解到CSS3已经能够实现非常多以往必须通过JS才干实现的效果,如渐变,阴影,自己主动截断文本展示省略号等等强大效果,并且这些功能日渐成熟,已经大量用于生产环境。H5真的日渐成熟了,得恶补下了。

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

    <style>
    .text1 {
        200px;
        overflow:hidden;
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        -webkit-text-overflow:ellipsis;
        -moz-text-overflow:ellipsis;
        white-space:nowrap;
    }
    .text2 {
        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>

    例如以下图:


  • 相关阅读:
    swift NSComparator
    Java mac 上编写Java代码
    四舍五入、上取整、下取整
    数组排序
    删除xcode 里的多余证书
    启动画面 设置
    CGFloat Float 互转
    navigationController pop的几种方法
    iOS 获取键盘相关信息
    eclipse代码格式化
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/7283100.html
Copyright © 2011-2022 走看看