只展示几行文字 超出部分隐藏且显示省略号

<view class="talkingContent">
    作息规律，能合理安排每日的学习与休闲活动时间，不过度使用电子产品发发发佛靠国际控股刚看过开始公开理工科节省空间福克斯积分卡积分卡积分卡交罚款JFK放假啊放假啊开发静安分局啊发发发发发发发发发大
</view>






.talkingContent{
                    display: -webkit-box;/*弹性伸缩盒子模型显示*/
                    -webkit-box-orient: vertical;   /*排列方式*/ 
                    -webkit-line-clamp: 3;/*显示文本行数*/
                    overflow: hidden;/*溢出隐藏*/
                    text-overflow:ellipsip;/*溢出显示省略号*/
                    margin-top: 24rpx;
                    width: 100%;
                    height: 116rpx;
                    line-height: 44rpx;
                }

详解:

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数,为了实现该效果,它需要组合其他的webkit属性.

常见结合属性:

display: -webkit-box 必须结合的属性,将对象作为弹性伸缩盒子模型显示

-webkit-box-orient: vertical;  必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式,这里是垂直排列.

text-overflow:ellipsip;可以用来多行文本的情况下,用省略号"..."影藏超出范围的文本.