css控制超出文本(单行和多行文本超出省略号)...

1.单行省略

　　width:100px;

　　white-space: nowrap;

　　overflow: hidden; 

　　text-overflow: ellipsis;

　　-o-text-overflow: ellipsis;

2.多行省略

　　overflow:hidden;

　　text-overflow:ellipsis;

　　display:-webkit-box;

　　-webkit-box-orient:vertical; 

3.限制多少行...

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

 

---------------------------------------

 

uniapp中

 

　　text-overflow: -o-ellipsis-lastline;
　　overflow: hidden;
　　text-overflow: ellipsis;
　　display: -webkit-box;
　　-webkit-line-clamp: 1; //可设置显示的行数
　　line-clamp: 1;
　　-webkit-box-orient: vertical;

 

// 单行文本出现省略号
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
 
// 多行文本出现省略号
display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
-webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
line-clamp: 3;
word-break: break-all;
overflow: hidden;
max-width: 100%;