微信小程序页面显示单行,多行省略号,以及个别样式兼容问题

display:flex  弹性布局在小程序里面应用很便利,但是在不同系统下不兼容,display里面的属性没有实现,去网上查了一下问题说是不同内核的问题。(不同浏览器内核不同)

解决问题的方法:在display:flex属性的css文件下加上上图对于不同内核的不同属性。基本都可以解决问题了。

大家也都知道   文字太长超过容器的长度的时候会发生溢出。这时候如果你需要这个文本在一行显示不进行换行就写上如下图所示的代码:

这个里面也需要注意到兼容问题。

然后,多行出现省略号:

其中   -webkit-line-clamp:4的意思就是将文本分为四行。然后再第四行的末尾出现省略号。效果如下:

然后  还有一个css样式  :  white-space:  nowrap, 意思是强制不换行,但是如果下面含有子容器的时候    在子容器的样式里面写上:display: inline-block,

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaofang_up-everyday

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值