微信小程式(5) 文字溢位斷尾顯示省略號

2021-08-22 02:41:37 字數 971 閱讀 8976

▍寫在前面(來訪者請直接瀏覽下一條)

在寫頁面的時候遇到乙個問題:需要對某件商品進行描述,但是往往描述文字過長,如果全部一次性顯示可能對樣式的一致性造成破壞,影響頁面美觀,於是我聯想到了之前在很多**上見過省略部分文字的方法,決定自己實踐一次。

▍效果預覽

先貼上最終實踐效果:

▍實現方法

【注意】為了能更清晰的了解文字超限斷尾的使用方法,以下所有css**將省略全部關於字型以及顏色設定的樣式。

1、文字超出一行,省略超出部分(不限制寬度):

因而為了不造成樣式的擠壓,所以需要給文字區域設定寬度。

2、文字超出一行,省略超出部分(限制寬度):

.list-item-instructions
這樣寬度設定好了,也就不會對造成擠壓了。

但是下面的區域空白還是有些不太合適,所以我還想自定義顯示的行數。

3、自定義顯示的行數:

.list-item-instructions
這就就大功告成了:

▍後記

5文字溢位

文字溢位 overflow visible 預設值 hidden 超出隱藏 scroll 顯示滾動條 auto 自適應檢視 inherit 繼承父元素overflow值文字換行 white space normal 預設值 pre 原格式輸出,空白會被瀏覽器保留 pre wrap 文字不會換行,文字...

微信小程式解決view文字文字過多溢位問題

overflow hidden 超出一行文字自動隱藏 text overflow ellipsis 文字隱藏後新增省略號 white space nowrap 強制不換行display webkit box 盒子型別 word break break all 自動換行的處理方法。允許在單詞內換行 t...

微信小程式 rich text富文字

nodes屬性可為array和string型別,但推薦使用array.由於string型別最終也會轉為array型別 nodes分為支援兩種節點,分別為元素節點 type node 預設為元素節點 和文字節點 type text 元素節點 name 標籤名 string 是 支援部分受信任的html...