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