CSS 實(shí)現(xiàn)文本的單行和多行溢出省略效果

單行文本

.text {
    overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

• overflow: hidden（文字長(zhǎng)度超出限定寬度，則隱藏超出的內(nèi)容）
• white-space: nowrap（設(shè)置文字在一行顯示，不能換行）
• text-overflow: ellipsis（規(guī)定當(dāng)文本溢出時(shí)，顯示省略符號(hào)來(lái)代表被修剪的文本）

多行文本（css）

.text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

• -webkit-line-clamp: 2（用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù), 2 表示最多顯示 2 行。為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性）
• display: -webkit-box（和 1 結(jié)合使用，將對(duì)象作為彈性伸縮盒子模型顯示 ）
• -webkit-box-orient: vertical（和 1 結(jié)合使用 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 ）
• overflow: hidden（文本溢出限定的寬度就隱藏內(nèi)容）
• text-overflow: ellipsis（多行文本的情況下，用省略號(hào)“…”隱藏溢出范圍的文本)

多行文本（js）

• 監(jiān)聽(tīng)DOM尺寸變化
• 判斷是否溢出 scrollHeight > offsetHeight
• 二分查找多行截取字符臨界值（算法的解法：判斷字符串是否溢出，二分查找字符串溢出臨界子串，控制...顯示）