微信小程式文字超過行後隱藏並且顯示省略號

2021-09-30 19:36:38 字數 755 閱讀 7972

單行超出字數隱藏顯示省略號 

/* 單行隱藏字數,超出按照省略號 */

display: block;

width:144px;

height: 60rpx;

line-height: 40rpx;

overflow: hidden;

white-space: nowrap;

text-overflow:ellipsis;

多行:

display:-webkit-box;

font-size:28rpx;

color:#000000;

line-height: 40rpx;

word-break: break-all;

-webkit-box-orient:vertical; /*子元素排列 vertical(豎排)*/

-webkit-line-clamp:5; /*設定顯示的多少行。*/

overflow: hidden;

text-overflow:ellipsis;

word-break:break-all;
例如div寬200px,它的內容就會到200px自動換行,如果該行末端有個英文單詞很長(congratulation等),它會把單詞截斷,變成該行末端為conra(congratulation的前端部分),下一行為tulation(conguatulation)的後端部分了。

微信小程式 文字跑馬燈

效果 1 顯示完後再顯示view class example class marquee box class marquee text style px font size px view view view 2 出現白邊後即顯示view class example class marquee bo...

初識微信小程式 文字樣式設定

文字樣式設定 文字屬可以定義文字的外觀。通過設定文字屬性,可以 改變文字的顏色 字元間距,對齊文字,裝飾文字,對文字 進行縮排,等等。north china university of technology ncut is located in the western part of beijing...

微信小程式文字檢視更多和收起

1 文字超過n行顯示省略號 2 省略時,顯示 展開 收起 按鈕 3 文字不超過n行時,不顯示省略號和展開 收起按鈕 實現功能,記錄此次開發經驗,以便當做筆記查詢。實現思路 文字過長顯示省略號 展開和收起功能,通過css樣式即可實現 判斷是否顯示展開 收起按鈕 通過巢狀元素,可以實現text既顯示省略...