移动端文字过多显示省略号
类别:Web前端 浏览量:799
时间:2016-11-23 移动端文字过多显示省略号
移动端文字过多显示省略号一、单行文字过多显示省略号
//单行
.single{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
二、多行文字过多显示省略号
可以使用-webkit-line-clamp ,但是-webkit-line-clamp是一个不规范的属性,它没有出现在 CSS 规范草案中。-webkit-line-clamp是WebKit的CSS扩展属性,适用于移动端内核为WebKit的浏览器
.more{
display:-webkit-box !important;
overflow:hidden;
text-overflow:ellipsis;
work-break;break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2; //指定行数
}
标签:CSS文本溢出