本文記錄實現文字溢位顯示省略號的幾種方式。
三行css**實現：
overflow: hidden; // 文字溢位隱藏
text-overflow: ellipsis; // 顯示省略號
white-space: nowrap; // 設定文字不換行
具體例子如下：
這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字
在未設定.textellipsis樣式之前文字如上圖顯示。
設定.textellipsis樣式之後，如下圖顯示。顯示兩行，可以通過設定-webkit-line-clamp的屬性值來控制顯示的行數。
word-break: break-all;所有的都換行，不留一點空隙的換行。如下圖所示。
2. 非webkit瀏覽器
可以通過css樣式技巧實現。例項如下：
這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字
參考文章：
css實現文字溢位顯示省略號
看到很多 上的文章列表只顯示一部分，之後就是乙個閱讀全文鏈結，或者是以乙個省略號結尾。今天就說說單行文字，多行文字溢位時怎麼顯示省略號？overflow hidden white space nowrap text overflow ellipsis display webkit box 將物件作為...
css實現單行（多行）文字溢位顯示
overflow hidden text overflow ellipsis white space nowrap 當然還需要加寬度width屬來相容部分瀏覽。以上為單行文字溢位 以下為多行文字溢位 display webkit box webkit box orient vertical webk...
CSS實現文字顯示部分內容，多餘文字顯示省略號
1.顯示一行文字內容，多餘的內容用省略號顯示 overflow hidden text overflow ellipsis white space nowrap 2.顯示指定行數的文字，多餘的內容顯示省略號 display webkit box webkit box orient vertical ...