当行文本、多行文本超出省略号显示

1.单行文本超出省略号显示:

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

2.多行文本超出省略号显示:

(1)这种方法不兼容,只适合webkit内核的浏览器和移动端

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;(文本的行数)

-webkit-box-orient: vertical;

(2)兼容写法

p {

    position:relative;

    line-height:1.6em;

    height:3.2em;(n行、n倍的行高)

    overflow:hidden;

}

p::after {

    content:"...";

    position:absolute;

    bottom:0;

    right:0;

    padding:0 10px;

    background:url(bg.png) repeat-y;

}

height高度真好是line-height的2倍;

结束的省略号用了半透明的png做减淡的效果,或者设置背景颜色;

IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用...去模拟;

要支持IE8,需要将::after替换成:after;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容