CSS單行/多行文本溢出顯示省略號

CSS文本溢出顯示省略號

問題背景：在一些網站的首頁或者簡略的文章介紹時，我們常常會讓超出規劃區域的文本隱藏，以增強用戶體驗
解決方案：

• 方案一單行文本自動省略號

    .overflow{
        word-break:break-all;   
        white-space:no-wrap;  /*不換行*/
        overflow:hidden;  /*溢出隱藏*/
        text-overflow:ellipsis;  /*文本溢出省略號*/
    }

注意點：該方案只能夠實現單行文本溢出省略號

• 方案二 針對webkit內核的瀏覽器
  用他的私有屬性-webkit-line-clamp，配合其他幾個屬性（display:-webkit-box、-webkit-oridient、text-overflow:ellipsis），就可以完美實現單行或多行的文本溢出顯示省略號了
  代碼：

       .overflow{
          display:-webkit-box;     /*設置對象爲伸縮盒子模型*/
          -webkit-box-orient:vertical;  /*伸縮盒對象排列方式爲垂直*/
          text-overflow:ellipsis;  /*文本溢出的時候省略號處理*/
          -webkit-line-clamp:2;  /*限制一個塊元素顯示的行數*/
          overflow:hidden;  /*將溢出的部分隱藏起來*/
       }

  注意點：該方案只是針對webkit內核的進行了實現，對於火狐等瀏覽器並沒有效果

  • 方案三
    使用javascript計算文本字數，一旦超出就截斷並加上省略號的方法

    var maxLength = 18;  //最長的字符串長度
    if($('.overflow').text().length > maxLength){
        $('.overflow').text($('.overflow').text().substring(0,maxLength) + '...'); //截取字符串並在結尾添加上...
    }

使用JavaScript實現文本溢出的方法還有很多種，大家可以在參考鏈接裏面找到更好的
參考鏈接：
[1] WEB前端開發
[2] 多行文本溢出顯示省略號的JS實現
[3] 鑫大大的博客

前端小白，請多多指教