<!-- WebKit瀏覽器或移動端的頁面 在WebKit瀏覽器或移動端（絕大部分是WebKit內核的瀏覽器）的頁面實現比較簡單，可以直接使用WebKit的CSS擴展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個 不規范的屬性（unsupported WebKit property），它沒有出現在 CSS 規范草案中。 -webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。 常見結合屬性： display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。 -webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。 text-overflow: ellipsis;，可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本 。 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 這個屬性比較合適WebKit瀏覽器或移動端（絕大部分是WebKit內核的）瀏覽器。 DEMO解釋: em{ width:200px;——寬度必須加 overflow: hidden;——溢出隱藏 text-overflow: ellipsis;——可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本 white-space: nowrap;——不換行 display: block; } p{ width:200px;——寬度必須加 overflow : hidden;——將多余的隱藏 text-overflow: ellipsis;——可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本 display: -webkit-box;——必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。 -webkit-line-clamp: 2;——顯示的行數 -webkit-box-orient: vertical;——必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 word-break:break-all;——如果一行中帶有數字、英文、文字須加此行,起到強制換行的作用 } 具體看如下DEMO： --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>單行，多行文本溢出顯示省略號</title> <style> em{ width:200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } p{ width:200px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break:break-all; } </style> </head> <body> <!-- 單行文本溢出顯示省略號 --> <em>多行文本溢出顯示省略號多行文本溢出顯示省略號多行文本溢出顯示省略號多行文本溢出顯示省略號多行文本溢出顯示省略號多行文本溢出顯示省略號多行文本溢出顯示省略號</em> <em>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</em> <!-- 多行文本溢出顯示省略號 --> <p>多行文本溢出顯示省略號多行文本溢出顯示省略號多行文本溢出顯示省略號多行文本溢出顯示省略號多行文本溢出顯示省略號多行文本溢出顯示省略號多行文本溢出顯示省略號</p> <p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p> </body> </html>