CSS文本超出2行就隱藏而且顯示省略號

時間 2019-12-08

標籤 css 文本超出隱藏而且顯示省略號欄目 CSS 简体版

原文原文鏈接

今天作東西，遇到了這個問題，百度後總結獲得了這個結果。css

首先，要知道css的三條屬性。html

overflow:hidden; //超出的文本隱藏css3

text-overflow:ellipsis; //溢出用省略號顯示web

white-space:nowrap; //溢出不換行數組

這三個是css的基礎屬性，須要記得。dom

可是第三條屬性，只能顯示一行，不能用在這裏，那麼若是顯示多行呢？spa

css3解決了這個問題，解決方法以下：.net

display:-webkit-box; //將對象做爲彈性伸縮盒子模型顯示。code

-webkit-box-orient:vertical; //從上到下垂直排列子元素（設置伸縮盒子的子元素排列方式）htm

-webkit-line-clamp:2; //這個屬性不是css的規範屬性，須要組合上面兩個屬性，表示顯示的行數。

最後的css樣式以下：

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

轉載自：http://blog.csdn.net/bing0728004/article/details/51509435

-----------------------------------一下代碼還未驗證真僞-------------------------------------------

若是是兩行或者三行的容器，想要純用css實現這個方法，是沒辦法作到的。

能夠提供兩種方法，一是用程序輸出時截字，二是用js判斷字數截取。

JS的demo以下：

 
      <!DOCTYPE html> 
     
      <html> 
     
      <head> 
     
      <meta charset="utf-8"> 
     
      <title>Examples</title> 
     
      <style type="text/css"> 
     
      .demo{width:100px;} 
     
      </style> 
     
      </head> 
     
      <body> 
     
      <div class="demo" id="demo">怎麼顯示兩行或三行文字，而後多出的部分省略號代替?</div> 
     
      <script> 
     
      // js沒法直接經過class獲取對象，必須本身寫一個方法,這樣效率會很是低，原生js裏最好用id獲取， 
     
      // 直接用id獲取domo對象 
     
      var oBox=document.getElementById('demo'); 
     
      // slice() 方法可從已有的數組中返回選定的元素。 
     
      // 您可以使用負值從數組的尾部選取元素。 
     
      // 若是 end 未被規定，那麼 slice() 方法會選取從 start 到數組結尾的全部元素。 
     
      // 此處須要根據需求自行修改slice()的值，以達到要顯示的內容 
     
      var demoHtml = oBox.innerHTML.slice(0,10)+'...'; 
     
      // 填充至指定位置 
     
      oBox.innerHTML = demoHtml; 
     
      </script> 
     
      </body> 
     
      </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。