解決文字溢出和兼容性問題的處理

以前寫網頁過程當中當文字須要後臺調用的時候會遇到不少客戶喜歡上傳成百上千個字（這個時候網頁上就會出現密密麻麻的全是文字）

固然其實很好解決咱們只要在編碼過程當中養成良好給div或者p標籤一個高，而後給一個overflow: hidden;溢出隱藏就行了這個時候就是如圖的效果

可是這樣看上去很突兀，這時候咱們就須要有更優質的體驗的方法，使其結尾加上省略號代碼以下

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;

備註：第三行代碼中你須要顯示幾行，此處的數字就應該寫多少！

效果以下

可是此代碼在火狐當中是不兼容的（而且溢出隱藏的屬性都被覆蓋），因此咱們得記得在使用此代碼的同時必定要給盒子或者標籤設置高度，能夠適當的解決火狐不兼容的問題（可是仍是不會出現省略號）！