CSS-單行省略和多行省略

單行省略

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

有時候因爲彈性或者浮動等情況不生效的話，可以在加個max-width 限制寬度來實現

多行省略

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

這裏我們可以把 -webkit-line-clamp變成動態的  通過JS來控制  封裝成一個組件 可以來實現 動態省略幾行的功能，而不是單獨固定死，不能改變，

強制換行

div{
    word-wrap: break-word;
	word-break: normal;
}

IE強制英文斷行

div{
    word-break:break-all;
 }