css怎麼實現超出兩行顯示省略號

CSS中，透過text-overflow屬性可以實現當文字內容超出指定區域時，顯示省略號的效果，讓頁面更美觀。以下就是詳細介紹：

1. text-overflow屬性

CSS中的text-overflow屬性用於設定當元素內容溢出其框時如何操作。它有三個常用值：

• clip：剪下文字來適應元素寬度。遮斷內容後面的文本，且不顯示省略號。
• ellipsis：顯示一個省略號（...），以表示剪下的文字。
• string：更改省略號字元為指定的字串。

如下範例，我們可以看到當文字溢出父容器時，用省略號來縮寫內容。

div {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

其中white-space屬性用於指定如何處理元素內的空白，nowrap表示文字不換行。 overflow屬性用於指定元素內容溢出時如何處理，hidden表示溢出的內容隱藏。

2. 結合max-height屬性

當元素中的文字過多，需要透過設定高度來限製文字展示的行數，如果限定高度後再使用text -overflow屬性可能會發現省略號仍然無法出現。

原因是text-overflow僅適用於具有固定寬度的區塊級元素。因此，我們需要結合max-height屬性來解決此問題。

如下範例，我們設定元素最大高度為三行，當文字超出三行時，用省略號來縮寫內容。

div {
  width: 150px;
  max-height: 3em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

其中，-webkit-line-clamp屬性用於指定文字行數，而-webkit-box-orient屬性則用於指定文字方向，vertical表示文字為垂直方向排列。

3. 結合JavaScript

以上方式皆是基於CSS的樣式實現，若想動態展示文章的內容，就需要結合JavaScript來實作。

透過計算元素實際高度和內容的實際高度來決定是否需要展示省略號。以下是一個簡單的範例：

var element = document.querySelector('.element');
var contentHeight = element.scrollHeight;
var elementHeight = parseInt(getComputedStyle(element).height);

if (contentHeight > elementHeight) {
  element.addEventListener('click', function() {
    this.classList.toggle('expand');
  });
}

在這個範例中，我們先取得元素內容的高度和元素實際高度，如果內容高度大於元素高度，那麼就為元素新增一個點擊事件，透過CSS樣式展示或隱藏文字內容。

4. 其他注意事項

   • text-overflow屬性僅適用於單一行的元素或具有確定寬度的區塊級元素。
   • 在使用text-overflow屬性時，white-space屬性應為nowrap。
   • 在結合max-height屬性時，white-space屬性應為normal，並使用-webkit-line-clamp屬性來指定行數。
   • 不同瀏覽器對text-overflow屬性的支援可能不同，請謹慎使用。

總的來說，使用text-overflow屬性可以讓頁面更美觀，同時也能更好的展示文章的內容。希望本文對您有幫助。

以上是css怎麼實現超出兩行顯示省略號的詳細內容。更多資訊請關注PHP中文網其他相關文章！