如何使用 CSS 中的自訂指示器隱藏文字溢出？

使用指示器隱藏文字溢出

要壓縮超過兩行的文字並指示隱藏內容，可以實施自訂解決方案，直到line-clamp 屬性的未來實作。

自訂解決方案

1. 設定文字容器的行高和最大高度，將其顯示限制為兩行。
2. 使用overflow:hidden屬性隱藏溢出的文字。
3. 建立陰影效果以遮擋省略號會顯示的文字。
4. 放置一個跨度使用絕對定位在容器右下角具有所需指示符文字的元素。
5. 將省略號加到 span元素的開頭，並將指示符文本添加到其

CSS

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

.main-text:after {
  content: "123 T.";
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  color: #8e8f8f;
  font-size: 10px;
  background: #fff;
  margin-left:2px;
}

.main-text span {
  position: absolute;
  top: 1.2em;
  right: 0;
  padding: 0 3px;
  background: #fff;
}

.main-text span:before {
  content: "...";
}

.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;
}

HTML

<div class="main-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
  vitae. <span></span>
</div>

此解決方案隱藏溢位文字並顯示兩行後的指定指示符。

以上是如何使用 CSS 中的自訂指示器隱藏文字溢出？的詳細內容。更多資訊請關注PHP中文網其他相關文章！