需求:文字超出部分显示...
思路:给出一个max-length,利用文本不换行实现
//单行
.cont{
max-length:300px;
overflow:hidden;/*内容超出后隐藏*/
text-overflow:ellipsis;/*超出内容显示为省略号*/
white-space:nowrap;/*文本不进行换行*/
}
//多行
.cont2{
max-length:300px;
overflow:hidden; /*内容超出后隐藏*/
text-overflow:ellipsis;/*超出内容显示为省略号*/
display:-webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient:vertical;/*从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)*/
-webkit-line-clamp:2; /*这个属性不是css的规范属性,需要组合上面两个属性,表示显示的行数。可根据需要设置超出多少行后显示省略号*/
}