zoukankan      html  css  js  c++  java
  • CSS:超出部分省略号

    首先,先让大家看下效果图。

    1.不换行情况(第一张图代码)

    首先,你要设置一个宽度。这样编译的时候才会知道超过多少会出现省略号,其次,加上这三行代码就OK了

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    2.多行情况(第二张图代码)

    这里就不用设置宽度,但是是你要设置行数,但是注意:它不会超过父类的宽度。

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    但只兼容webkit内核浏览器以及移动端

    如果想兼容其他浏览器(未考虑IE),可以通过伪类::after实现,但也有小的bug。同时,由于IE6、7不能显示content内容,所以可以添加标签兼容IE6、7;兼容IE8以上需要将::after替换成:after。

    p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
    p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
    }

    当文字不超出的时候,省略号也会出现。推荐搭配JS完善。在上方代码中设置渐变背景是为了防止字体只显示一半的问题;同时将height设置为line-height的整数倍是为了防止超出文字显示出来。

  • 相关阅读:
    安卓API首页
    安卓开发学习1
    Unity3D安卓交互
    跨天查询,少一天的问题
    COALESCE关键字的使用
    Map构造器模式 map builder pattern
    Linux服务器端使用tcpdump抓redis报文
    Java Unsigned Bytes
    JAVA与c#中byte取值范围的差异
    jack反序列化自定义字段绑定,报错:can only instantiate non-static inner class by using default, no-argument constructor
  • 原文地址:https://www.cnblogs.com/WQLong/p/7874760.html
Copyright © 2011-2022 走看看