1.單行文字（相容IE6以上、主流瀏覽器）

下面這三個一定要一起使用才能實現效果。另外要給盒子加寬度才能有超出部分。

white-space: nowrap; /*強制文字在一行內顯示，不換行*/
overflow: hidden; /*超出部分隱藏*/
text-overflow: ellipsis; /*文字溢位時顯示省略標記  相容IE*/

-webkit-text-overflow: ellipsis; /*文字溢位時顯示省略標記  相容Safari*/
-o-text-overflow: ellipsis; /*文字溢位時顯示省略標記  相容Opera*/

程式碼：

CSS樣式:

  <style
 
>
    p {
      display: inline-block;
      width: 270px;
      line-height: 40px;
      background-color: pink;      
      white-space: nowrap;
      overflow: hidden;

      text-overflow: ellipsis; /*文字溢位時顯示省略標記  相容IE*/
      -webkit-text-overflow: ellipsis; /*文字溢位時顯示省略標記  相容Safari*/
      -o-text-overflow
 
: ellipsis; /*文字溢位時顯示省略標記  相容Opera*/
    }
  </style>


HTML程式碼:

  <p>我是一個段落我是一個段落我是一個段落我是一個段落我是一個段落我是一個段落我是一個段落</p>

2. 多行文字

display: -webkit-box;
-webkit-line-clamp: 3;  /*數字是幾就顯示幾行*/
-webkit-box-orient: vertical;
overflow: hidden;

程式碼：

CSS樣式:

<style>    
    .box {
      width
 
: 400px; /*要給一個寬度*/
      display: -webkit-box;
      -webkit-line-clamp: 3;/*數字是幾就顯示幾行*/
      -webkit-box-orient: vertical;
      overflow: hidden;
      background-color: pink;
      line-height: 28px;
  }
  </style>

HTML程式碼:

<div class="box">
    多行文字溢位最後一行顯示省略號多行文字溢位最後一行顯示省略號多行文字溢位最後一行顯示省略號多行文字溢位最後一行顯示省略號多行文字溢位最後一行顯示省略號多行文字溢位最後一行顯示省略號
</div>