CSS实现单行、多行文本溢出显示省略号的实现方法

一、单行溢出

1,单行溢出,超出部分显示...或者截取。前提必须有宽度。
CSS:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;},截取为clip;

实现代码:

    css">
  1. width:300px;   
  2. overflowhidden;   
  3. text-overflow:ellipsis;   
  4. whitewhite-spacenowrap;  

效果如图:
CSS实现单行、多行文本溢出显示省略号的实现方法
    css">
  1. display: -webkit-box;   
  2. -webkit-box-orient: vertical;   
  3. -webkit-line-clamp: 3;   
  4. overflowhidden;  

效果如图:
CSS实现单行、多行文本溢出显示省略号的实现方法
  1. p{positionrelativeline-height20pxmax-height40px;overflowhidden;}   
  2. p::after{content"..."positionabsolutebottombottom: 0; rightright: 0; padding-left40px;   
  3. background: -webkit-linear-gradient(lefttransparent#fff 55%);   
  4. background: -o-linear-gradient(rightrighttransparent#fff 55%);   
  5. background: -moz-linear-gradient(rightrighttransparent#fff 55%);   
  6. background: linear-gradient(to rightrighttransparent#fff 55%);   
  7. }  

适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注:

1.将height设置为line-height的整数倍,防止超出的文字露出。
2.给p::after添加渐变背景可避免文字只显示一半。
3.由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。