微信小程序 實現多行文字 超出部分省略號顯示

在開發小程序： 澳買 的 時候 遇到一個棘手的問題：

當搜索澳洲產品，獲取產品列表的時候，有時候產品的名稱翻譯成中文特別長

我們不能全部在有限的列表里面把產品名都顯示出來，這樣格式不好控制，顯示

出來也不太美觀。

這時候我們就需要一個功能：比如設置只顯示2行，2行顯示不下的情況下我們

用省略號... 來替代，這樣顯示比較美觀好看，顯示效果如下

 

其實實現也是比較簡單的

工程中樣式文件.wxss內容如下：

.productNameText {

  color: rgb(32, 27, 27);

  font-size: 35rpx;

  text-overflow:ellipsis;

  z-index: -1;

  display: -webkit-box;

  word-break: break-all;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 3;

  overflow: hidden;

}

 

這里-webkit-line-clamp: 3; 主要控制要顯示的行數

wxml 文件內容如下：

......

<!-- produdct name -->

  <view class='productNameView'>

    <text class='productNameText'>{{item.name}}</text>

  </view>

 

......

有興趣的朋友 可以掃碼體驗一下：

 

注： 小程序 - 澳買 是一款這樣的小程序：
看不懂澳洲產品上的英文信息？

不知道保健品如何服用？

掃產品條形碼直接翻譯！

掃描澳洲產品包裝上的二維碼，所有澳洲保健品、食品、化妝品及母嬰用品通通立可查詢。

還可以選擇語音直接收聽產品的詳細中文介紹，包括產品中文名稱、產品成分、功效及使用方法。

來掃碼吧，將澳洲產品一網打盡！

”澳買“所有產品信息都直接翻譯自產品外包裝，不含商城、代購等商業廣告信息，完全中立，請放心使用！

”澳買“涵蓋了大部分澳洲葯店、超市在售的主流產品，不過澳洲產品品類繁多、新品層出不窮，“澳買“會不斷完善補充新品信息。如果您手上有任何未覆蓋到的漏網之魚，請直接聯系客服！