本文共 2049 字,大约阅读时间需要 6 分钟。
Write By Monkeyfly
以下内容均为原创,如需转载请注明出处。
文字超出省略显示的效果
在真机上显示无效。但是微信开发者工具上的手机模拟器可以正常显示省略号(...)
。//文本溢出单行省略的代码如下:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
小程序文字超出省略显示,真机测试没效果。微信开发者工具显示正常。
代码如下所示:
//WXML{ { order.senderName}} [{ { order.senderCity}}] { { order.receiverName}} [{ { order.receiverCity}}] { { senderInfo.CUSTOMER_NAME}} [{ { senderInfo.CITY_NAME}}]
页面效果图:
//WXSS.order-info{ display: flex; flex-direction: row;/*决定主轴的方向(即项目的排列方向)。*/ flex-wrap:nowrap;/*定义了如果一条轴线排不下,如何换行*/ justify-content: space-between;/*定义了项目在主轴上的对齐方式*/ align-items:center;/*定义项目在交叉轴上如何对齐。*/ margin-top:20rpx; width: 100%;}.order-info view{ //为了方便,将 order-info下面的 view 全部设置为了 inline-block【问题根源】 display: inline-block;}.order-info-send,.order-info-accept{ font-size: 28rpx; width:200rpx; color:#999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.send-city,.accept-city{ margin-left:5rpx;}.order-info-arrow{ width:120rpx; height:10rpx; margin:0 20rpx 0 0;}
微信开发者工具中模拟器的显示效果:
安卓手机的页面显示效果:
苹果手机的页面显示效果:
问题代码部分:
//WXML{ { order.senderName}} [{ { order.senderCity}}]
//WXSS.order-info view{ //为了方便,将 order-info下面的 view 全部设置为了 inline-block【问题根源】 display: inline-block;}.order-info-send{ font-size: 28rpx; width:200rpx; color:#999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
/*注:上面的代码导致类名为 order-info-send的view组件 下面包裹的 子view 组件 都被设为了“行内块级元素” *///即:.order-info-send{ //父view组件 display: inline-block;}.send-name,.send-city{ //父view组件嵌套的两个子view组件【问题所在】 display: inline-block;}
view
组件设置display:inline;
就可以了。【不建议这么做】
view
组件全部替换为text
组件即可。【推荐】