版权声明:本文为博主原创文章,如果转载请给出原文链接:http://doofuu.com/article/4156214.html
不管是开发网站还是小程序、或者APP都会遇到文本溢出的情况。上一篇博客实现了 QQ小程序二维码,这篇博客就重点来聊聊单行文本溢出和多行文本溢出的解决办法!其实也特别的简单,关键是用到下面这个几个样式而已,来看看吧
display: -webkit-box; /*设置为弹性盒子*/
-webkit-line-clamp: 3; /*最多显示x行*/
overflow: hidden; /*超出隐藏*/
text-overflow: ellipsis; /*超出显示为省略号*/
单行文本超出显示省略号
display: -webkit-box; /*设置为弹性盒子*/ overflow:hidden; //超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap; //强制不换行
多行文本溢出显示省略号
overflow: hidden;/*超出隐藏*/ display: -webkit-box; /*设置为弹性盒子*/ -webkit-line-clamp: 3; /*最多显示x行*/ text-overflow: ellipsis; /*超出显示为省略号*/ -webkit-box-orient: vertical;
很简单吧!关于这几种样式的意思就不在本文的范畴了,不懂的自己百度吧!
下面看看我的案例吧!
<view class="content" >{{item.content}}</view>
.content { display: -webkit-box; /*设置为弹性盒子*/ -webkit-line-clamp: 2; /*最多显示x行*/ overflow: hidden; /*超出隐藏*/ text-overflow: ellipsis; /*超出显示为省略号*/ -webkit-box-orient: vertical; font-size: 25rpx; color: #999; }
效果如下
演示QQ小程序
祝生活愉快!
「创作不易,你的支持是本站持续更新最大的动力!」
谢谢你请我喝奶茶*^_^*
共有 0 条评论 - uni-app开发之QQ小程序实现文本溢出显示省略号(四)