现在位置: 首页  >  编程技术  >  前端
CSS实现单行、多行文本溢出显示省略号
0 6510 转自:

一、单行溢出

单行溢出,超出部分显示...或者截取。前提必须有宽度.

CSS:{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;},截取为clip;

width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;

二、多行溢出

{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;
height:60px;
line-height:20px;/*行高和高度配合,计算出总行数*/
overflow: hidden;


 评论
 站内搜索