Css的用法總結part4 line-clamp
阿新 • • 發佈：2021-02-05
技術標籤：CSS
line-clamp
參考：line-clamp
限制在一個塊元素顯示的文字的行數。
-webkit-line-clamp 是一個 不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。
為了實現該效果，它需要組合其他外來的WebKit屬性。常見結合屬性：
- display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
- -webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
- text-overflow，可以用來多行文字的情況下，用省略號“...”隱藏超出範圍的文字 。
今天接到優化需求，帖子列表裡的內容要求縮略至3行，並帶‘…’省略號
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>cline-clamp</title> <style> .box{ width: 200px; height: 300px; border:1px solid black; } p{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; /*設定p元素最大4行，父元素需填寫寬度才明顯*/ text-overflow: ellipsis; overflow: hidden; /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ /*因為程式碼環境的關係-webkit-box-orient被過濾掉了 autoprefixer 這個關鍵字可以免除被過濾的動作*/ word-wrap:break-word; word-break:break-all; } </style> </head> <body> <div class="box"> <p> static：物件遵循常規流。top，right，bottom，left等屬性不會被應用。 relative： 物件遵循常規流，並且參照自身在常規流中的位置通過top，right，bottom，left屬性進行偏移時不影響常規流中的任何元素。 absolute：物件脫離常規流，使用top，right，bottom，left等屬性進行絕對定位， </p> </div> </body> </html>
如果你標籤內的是英文，英文是不會自動換行的，所以你需要讓他自動換行新增如下程式碼即可：
word-wrap:break-word;
word-break:break-all;box-orient 屬性
<!DOCTYPE html> <html> <head> <style> div { width:350px; height:150px; border:1px solid black; /* Safari, Opera, and Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; } </style> </head> <body> <div> <p>段落 1。</p> <p>段落 2。</p> <p>段落 3。</p> </div> <p><b>註釋：</b>IE 不支援 box-orient 屬性。</p> </body> </html>
