css 文本省略號顯示

文本省略號是非常常見的需求，而省略號展示又通常分為倆種情況折行和不折行。不折行：

div {  
  white-space:nowrap;/* 規定文本是否折行 */  
  overflow: hidden;/* 規定超出內容寬度的元素隱藏 */
  text-overflow: ellipsis;
  /* 規定超出的內容文本省略號顯示，通常跟上面的屬性連用，因為沒有上面的屬性不會觸發超出規定的內容 */
}

 

折行(能主動控制行數,這里設置的超出 4 行顯示省略號)：

div {      
  overflow: hidden;      
  text-overflow: ellipsis;      
  display: -webkit-box; /* 將對象作為彈性伸縮盒子模型顯示 */      
  -webkit-line-clamp: 4; /* 控制最多顯示幾行 */      
  -webkit-box-orient: vertical; /* 設置或檢索伸縮盒對象的子元素的排列方式 */    
}