如何優雅的控制文字顯示行數

2021-09-23 23:29:36 字數 564 閱讀 1479

如何簡單有效的隱藏超出長度的多行文字呢?

曾經覺得只能通過指令碼輔以配置才能比較完美的解決這個問題,這兩天才發現原來webkit瀏覽器中已經有完美的解決方案了。

這篇文章介紹了隱藏多行文字的幾種方式。下面介紹下webkit瀏覽器中純css的解決方案。

.line-clamp
look,就這麼簡單。-webkit-line-clamp: n;表示超過n行後的內容被隱藏,並用省略號替代超長的內容。

使用之前是這樣的:

服用以後是這樣的:

相容性,目前只測試了 ios7 (iphone5s) 和 android 4.3(紅公尺1s)。如果其他裝置不支援,可以考慮增加height,配合overflow降級使用也是極好的~

ata)

文字顯示行數控制

overflow hidden 溢位隱藏 text overflow ellipsis 超出顯示省略號 white space nowrap 強制文字在一行內顯示 overflow hidden text overflow ellipsis 超出顯示 display webkit box 將元素作為...

如何優雅的限制文字顯示

lang en charset utf 8 documenttitle body lispan style head 文字內容文字內容文字內容文字內容文字內容li 文字內容文字內容文字內容文字內容文字內容li 其實寫多少都無所謂,我只能看到這麼多,就這麼多,反正不可以再多了span ul body ...

c textbox顯示文字獲取行數

問 我將textbox設定為多行,如果想獲取其中文字的行數,可以採用textbox1.lines.length來獲取,這個方法應該是查詢文字中的換行符數量吧。我現在遇到的問題是 如果我連續輸入字元,不敲回車,當字元到達文字框的右邊框時會自動轉到下一行顯示,這從表面上看已經成了兩行,但因為沒有換行符,...