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元件即可。【推薦】