純CSS的多線截斷

這是一篇關於使用純CSS實現多行文本截斷的技巧文章，文章介紹了一種巧妙的方法，利用line-height和偽元素來實現文本截斷並顯示省略號（…）。

文章指出，雖然現在已經有標準化的方式來處理單行文本截斷，但多行文本截斷仍然比較棘手。 本文介紹的純CSS方法（無需JavaScript或服務器端操作）因其簡潔性而備受推崇。 Firefox 68及以上版本開始支持-webkit-line-clamp ，使得該方法的瀏覽器兼容性得到了改善。

然而，文章重點介紹了一種更巧妙的CSS技巧，該技巧利用line-height進行文本高度計算。 假設元素的line-height為1.4rem，要顯示最多三行文本，只需將max-height設置為1.4rem * 3即可。 為了方便使用，文章建議定義一個CSS變量--lh來設置全局line-height ：

 html {
  --lh: 1.4rem;
  line-height: var(--lh);
}

然後，使用max-height和overflow: hidden實現文本截斷：

 .truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

為了在截斷文本後顯示省略號，文章使用偽元素::before在文本底部右角添加省略號：

 .truncate-overflow::before {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
}

文章還指出，為了避免在文本行數少於--max-lines時顯示省略號，可以使用另一個偽元素::after覆蓋省略號：

 .truncate-overflow::after {
  content: "";
  position: absolute;
  right: 0;
  width: 1rem;
  height: 1rem;
  background: white;
}

文章最後提到了使用CSS邏輯屬性（如inset-inline-end代替right ）以提高不同語言和文本流場景下的兼容性，並指出了該方法的一個局限性：省略號並非緊貼最後一個單詞。 此外，文章還提及了該方法的一個潛在的無障礙問題：如果截斷的文本中包含交互元素，這些元素雖然可聚焦但不可見。

以上是純CSS的多線截斷的詳細內容。更多資訊請關注PHP中文網其他相關文章！