關於text-overflow
text-overflow 屬性規定當文本溢出包含元素時發生的事情。
| 默認值： | clip |
|---|---|
| 繼承性： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.textOverflow="ellipsis" |
語法： text-overflow: clip|ellipsis|string;
| 值 | 描述 | |
|---|---|---|
| clip | 修剪文本。 | |
| ellipsis | 顯示省略符號來代表被修剪的文本。 | |
| string | 使用給定的字符串來代表被修剪的文本。 |
這里主要說說 text-overflow: ellipsis;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div.test 6 { 7 white-space:nowrap; 8 width:12em; 9 overflow:hidden; 10 border:1px solid #000000; 11 } 12 </style> 13 </head> 14 <body> 15 16 17 <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div> 18 19 20 </body> 21 </html>
效果如下：
常見的想要的效果實現了~~細心你會發現text-overflow:ellipsis; 不可獨立使用必須結合overflow:hidden; white-space:nowrap;才生效。
然而white-space:nowrap; 是指不換行，就是說只能一行顯示。
但是有時我們想要實現多行的情況下，在最后一行的最后用“…”來表示。
多行顯示text-overflow: ellipsis
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <p>多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示多行顯示</p> 9 10 </body> 11 </html>
css如下
1 p{ 2 width:200px; 3 height: 32px; 4 overflow: hidden; 5 text-overflow: ellipsis; 6 display: -webkit-box; 7 -webkit-line-clamp: 2; 8 -webkit-box-orient: vertical; 9 font-size: 14px 10 }
demo效果：http://jsbin.com/depogojufi/edit?html,css,output
這里用了一個不是很常見的屬性 -webkit-line-clamp
在WebKit瀏覽器或移動端（絕大部分是WebKit內核的瀏覽器）的頁面實現比較簡單，可以直接使用WebKit的CSS擴展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個 不規范的屬性（unsupported WebKit property），它沒有出現在 CSS 規范草案中。
-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。
常見結合屬性：
1，display: -webkit-box; 必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。
2，-webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。
3，text-overflow: ellipsis;，可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本 。