移动端文字过多显示省略号
类别: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文本溢出
热门推荐
- centos 测试环境搭建(centos7下安装并配置supervisor守护程序的操作方法)
- navicat premium连接mysql报错(Navicat连接MySQL错误描述分析)
- 如何用微信公众号发送信息(微信公众号之主动给用户发送消息功能)
- SQL Server表误删记录如何恢复
- sqlparameter的用法介绍
- 宝塔面板怎么设置ftp(新安装宝塔Linux面板FTP无法连接的解决方法)
- html和js代码结合(JS、CSS和HTML实现注册页面)
- sqlserver存储过程同步数据(SQL Server存储过程同时返回分页结果集和总数)
- navicatformysql使用视图(Navicat for MySQL的使用教程详解)
- 面试时在坐姿上应该注意什么