CSS技巧：如何實現超出部分顯示省略號

一、為什麼超出部分需要顯示省略號？

當內容超出父容器的寬度或高度時，我們往往需要將超出的部分進行裁剪，並顯示省略號，以提示用戶該容器內還有更多的內容，需要進行查看。比如在新聞列表中，超出部分的標題需要進行省略，只顯示部分內容。

二、如何實現超出部分顯示省略號？

在CSS中，我們可以使用text-overflow屬性來實現該功能。text-overflow屬性控制元素內文本溢出時的顯示方式。常見的屬性值有：

• clip：超出部分隱藏
• ellipsis：超出部分顯示省略號

其中，使用ellipsis屬性值可以實現超出部分顯示省略號的效果。

三、在單行顯示文本中應用text-overflow: ellipsis

在單行顯示文本中，我們可以將text-overflow: ellipsis應用於文本容器上，以實現超出部分顯示省略號的效果。如下代碼所示：

  
.single-line-ellipsis {
  overflow: hidden; /* 超出部分隱藏 */
  white-space: nowrap; /* 不換行 */
  text-overflow: ellipsis; /* 超出部分顯示省略號 */
}
  

當文本容器的寬度不足以顯示文本全部內容時，超出部分將會顯示省略號。

四、在多行顯示文本中應用text-overflow: ellipsis

但是，如果我們要實現在多行顯示文本時的省略號效果，只使用text-overflow: ellipsis是無法實現的，需要通過其他方式進行實現。

一種解決方案是使用webkit-line-clamp屬性。該屬性只適用於webkit內核瀏覽器，通過指定一個數值，實現文本行數的控制。與此同時，還需要將文本容器的高度進行設定，以確定超出部分的顯示位置。代碼如下：

  
.multi-line-ellipsis {
  display: -webkit-box; /* 基於塊級元素的flex布局 */
  -webkit-box-orient: vertical; /* 設置為垂直方向 */
  overflow: hidden; /* 超出部分隱藏 */
  text-overflow: ellipsis; /* 超出部分顯示省略號 */
  -webkit-line-clamp: 3; /* 控制文本行數為3行 */
  line-height: 1.5; /* 行高 */
  height: 4.5em; /* 設定文本容器的高度為3行的高度 */
}
  

通過上述代碼，實現了多行文本的溢出部分顯示省略號的效果。

五、結語

通過對text-overflow屬性的簡單應用，我們可以實現超出部分顯示省略號的效果。不過，在多行顯示文本時，需要使用webkit-line-clamp屬性進行，但是該屬性只適用於webkit內核的瀏覽器。因此，在實際開發中，需要根據項目需要以及瀏覽器兼容性進行選擇使用。