文本溢出顯示省略号

單行溢出省略号顯示

.myText{

200px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

多行溢出省略号顯示

.myText{

200px;

/*text-overflow: ellipsis;*/

overflow: hidden;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

line-height: 1.5;

}

跨浏覽器相容的方案

1. p {
2. position:relative;
3. line-height:1.4em;
4. /* 3 times the line-height to show 3 lines */
5. height:4.2em;
6. overflow:hidden;
7. }
8. p::after {
9. content:"...";
10. font-weight:bold;
11. position:absolute;
12. bottom:0;
13. right:0;
14. padding:0 20px 1px 45px;
15. background:url(http://newimg88.b0.upaiyun.com/newimg88/2014/09/ellipsis_bg.png) repeat-y;
16. }