频道栏目
首页 > 资讯 > 微信小程序 > 正文

文字超出显示区域后隐藏并显示省略号

18-12-05        来源:[db:作者]  
收藏   我要投稿
单行文字超出后隐藏

首先容器需要有固定的宽高,其次加入以下代码即可。

view {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

多行文字超出后隐藏

容器不需要有固定的宽高,只需加入以下代码即可。

无需指定高度,只需指定最多显示几行,属性 -webkit-line-clamp。

本示例中最多显示3行,超出3行后,在第三行末尾用省略号代替显示。

view {

display: -webkit-box;

overflow: hidden;

text-overflow: ellipsis;

word-break: break-all;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

}

相关TAG标签
上一篇:微信小程序之路由拦截器
下一篇:API接口手工防御被恶意调用和接口被攻击
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站