如何隱藏兩行後的文字並顯示溢出指示器，例如'...123 T.”？

使用第二行溢位指示器隱藏點後的文字

顯示空間有限的文字時，通常需要截斷並指示溢位。此問題解決了隱藏超過兩行的文字並添加“...123 T”的挑戰。以第二行作為指示符。

目前實作

提供的程式碼最初解決了這個問題：

<div class="container">
  <span class="main-text">
    Long text that exceeds two lines.
  </span>
  <span class="small-text">123 T.</span>
</div>

.main-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

雖然這個方法將多餘的文字隱藏在兩行內，它不跨瀏覽器相容，可能無法完全滿足所需

未來的解決方案

規範提出了一個簡寫屬性，line-clamp，它可以將這個任務簡化為一行：

line-clamp: 2 "...123 T.";

此屬性允許建立帶有溢出的視覺截斷文字

Hacky 替代方案

在line-clamp 屬性得到廣泛支援之前，可以使用CSS hack 來實現解決方法：

.main-text {
  line-height: 1.2em;
  max-height: calc(2 * 1.2em);
  overflow: hidden;
  position: relative;
}

<div class="main-text">
  Lorem ipsum ...<span>123 T.</span>
</div>

在此方法中，帶有隱藏點和「123 T”的跨距元素。文字位於容器的右下角。一個大的盒子陰影用於隱藏視圖中的點，僅顯示省略號。

以上是如何隱藏兩行後的文字並顯示溢出指示器，例如'...123 T.”？的詳細內容。更多資訊請關注PHP中文網其他相關文章！