#### 1. 代碼示例 --- 顯示一行內容，超出部分使用省略號表示（只有塊元素才會生效） ```css .nowrap { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } ``` 顯示兩行內容，超出部分使用省略號表示 ```css .line-clamp-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 顯示行數 */ } ``` 解決英文和數字不會自動換行的問題 ```css word-break: break-all; ``` #### 2. 代碼解析 --- ` -webkit-line-clamp` 用于限制塊元素顯示文本的行數，它是一個不規范的屬性，沒有出現在 CSS 規范草案中。 為了實現限制文本的行數，需要組合其他 webkit 屬性，常見結合屬性: ```css /* 將對象作為彈性伸縮盒子模型顯示 */ display: -webkit-box; /* 設置或檢索伸縮盒對象的子元素的排列方式 */ -webkit-box-orient: vertical; /* 用省略號“...”隱藏超出范圍的文本 */ text-overflow: ellipsis; ```