微信小程式 text-overflow 設定無效的問題
阿新 • • 發佈:2019-02-13
Write By Monkeyfly
以下內容均為原創,如需轉載請註明出處。
前提
- 今天突然發現小程式頁面中之前設定的
文字超出省略顯示的效果
在真機上顯示無效。但是微信開發者工具上的手機模擬器可以正常顯示省略號(...)
。
//文字溢位單行省略的程式碼如下:
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
- 然後就去排查問題了。百度了一番沒找到答案,後來在群裡請教大佬,得到了答案。
問題描述
小程式文字超出省略顯示,真機測試沒效果。微信開發者工具顯示正常。
問題再現
程式碼如下所示:
//WXML
<view class="order-info">
<view class="order-info-send">
<view class="send-name">{{order.senderName}}</view>
<view class="send-city">[{{order.senderCity}}]</view>
</view>
<image class="order-info-arrow" mode="widthFix" src="../../../images/send-success/arrow-red.png" ></image>
<view class="order-info-accept">
<text class="accept-name">{{order.receiverName}}</text>
<text class="accept-city">[{{order.receiverCity}}]</text>
</view>
</view>
<view class="order-info-send">
<text class="send-name" >{{senderInfo.CUSTOMER_NAME}}</text>
<text class="send-city">[{{senderInfo.CITY_NAME}}]</text>
</view>
頁面效果圖:
//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
<view class="order-info">
<view class="order-info-send">
<view class="send-name">{{order.senderName}}</view>
<view class="send-city">[{{order.senderCity}}]</view>
</view>
</view>
//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;
}
解決方法
- 方法1:給內層巢狀的
view
元件設定display:inline;
就可以了。【不建議這麼做】
- 方法2:將內層巢狀的
view
元件全部替換為text
元件即可。【推薦】