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

一、基本概念

CSS多行文本溢出顯示省略號是一種常見的頁面排版技巧，通過設置CSS樣式，使元素內的文本內容超出指定的寬度或高度時，自動顯示省略號，從而提升頁面的可讀性和美觀性。實現多行文本省略的方式有多種，但通常需要結合CSS的display、overflow、text-overflow、white-space、line-height等屬性來實現。

二、基本實現方式

實現多行文本溢出顯示省略號的方式有很多，但其中比較基礎的方式是使用CSS的text-overflow屬性和white-space屬性。

  
    .overflow-text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      white-space: normal;
    }
  

1. text-overflow屬性

text-overflow屬性可以控制溢出文本如何顯示。在多行文本溢出時，配合white-space屬性使用可以使省略號顯示在文本中間或最後。

2. white-space屬性

white-space屬性用來控制元素內部文本的換行和空格處理方式。當white-space屬性設置為nowrap時，表示文本不允許換行；設置為normal時，表示文本可以自動換行。

3. -webkit-box屬性

-webkit-box是一種CSS3屬性，用來實現文本的多行顯示，-webkit-box-orient屬性用來設置文本的方向（水平或垂直），-webkit-line-clamp屬性用來設置行數。

三、高級實現方式

除了基本實現方式外，還可以結合其他屬性，實現更高級的多行文本溢出顯示省略號的效果。

1. line-clamp屬性

line-clamp屬性是CSS3的一個實驗性屬性，它可以直接控制元素內文本的行數。此屬性需要與display：-webkit-box屬性結合使用。

  
    .overflow-text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      white-space: normal;
    }
  

2. calc()函數

calc()函數是CSS3中的一個計算屬性，可以用來計算長度值。在多行文本省略的實現中，可以在父元素上設置max-height屬性，並在子元素（文本元素）中設置height屬性，通過calc()函數計算文本元素的高度。從而實現多行文本省略的效果。

  
    .overflow-text {
      display: block;
      max-height: calc(2em * 3);
      overflow: hidden;
      text-overflow: ellipsis;
    }
  

3. 純CSS實現

在一些瀏覽器中，上述方法不一定都能實現多行文本溢出顯示省略號的效果，因此可以使用一些CSS技巧來實現。例如，使用偽元素實現文本的追加並設置透明度漸變，使文本隨着行數自動消失，從而實現多行文本省略的效果。

  
    .overflow-text {
      overflow: hidden;
      position: relative;
      line-height: 1.5em;
      max-height: 4.5em;
      text-align: justify;
    }
    .overflow-text:before{
      float:left;
      content:"...";
      position:absolute;
      bottom:0;
      right:0;
      margin-right: -1.5em;
      padding:0 1.5em;
      background: white;
      color: #000;
      text-align:right;
      width: 100%;
      z-index: 1;
    }
    .overflow-text:after{
      content:"";
      position:absolute;
      bottom:0;
      right:0;
      width:1.5em;
      height:1.5em;
      margin-right: -1.5em;
      background: white;
      z-index: 2;
    }
  

四、總結

通過上述介紹，我們了解了多種實現多行文本溢出顯示省略號的方式，基本實現方式是通過text-overflow屬性和white-space屬性；高級實現方式包括line-clamp屬性、calc()函數和純CSS實現。在使用這些技術時，需要結合具體情況靈活使用，並根據瀏覽器兼容性進行適當的調整。