css多行省略號和單行省略號
阿新 • • 發佈：2020-07-14
一 ： css單行省略號
單行溢位，超出部分顯示...或者擷取。前提必須有寬度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=å, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> div { width: 200px; padding: 10px; box-sizing: border-box; height: 100px; border: 1px salmon solid; } div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style><body> <div> 陌生人，我也為你祝福 願你有一個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海，春暖花開 </div> </body> </html>
二 ： css多行省略號
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"content="width=å, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> div { width: 200px; box-sizing: border-box; border: 1px salmon solid; } div { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } </style> <body> <div> 陌生人，我也為你祝福 願你有一個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海，春暖花開 </div> </body> </html>
適用範圍：
因使用了WebKit的CSS擴充套件屬性，該方法適用於WebKit瀏覽器及移動端；
注：
1.-webkit-line-clamp用來限制在一個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：
2.display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
3.-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式;
三： 瀏覽器相容的方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=å, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> div { position: relative; line-height: 1.4em; /* 3 times the line-height to show 3 lines */ width: 252px; height: 4.2em; overflow: hidden; } div::after { content: "..."; font-weight: bold; position: absolute; bottom: 0; right: 0; } </style> <body> <div> 陌生人，我也為你祝福 願你有一個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海，春暖花開 </div> </body> </html>