如何使用省略號截斷文字並附加'123 T.”在下一行？-css教學-PHP中文網

如何使用省略號截斷文字並附加'123 T.”在下一行？

Patricia Arquette

發布： 2024-12-04 01:24:11

原創

198 人瀏覽過

How Can I Truncate Text with an Ellipsis and Append

將文字放在與第二行文字溢位省略號內聯的點之後

問題

要壓縮過長的文本，您打算隱藏文本的一部分，同時指示溢出“...123T。”在其後續行上，如下圖所示：

[用省略號和“123 T.」截斷的文字圖像]

解決方案

在不久的將來，一行帶有「line-clamp: 2 "...123 T.;」的程式碼將規範中提供了更多資訊。

免責聲明

在此功能廣泛可用之前，這裡有一個粗略的解決方法來實現所需的功能結果：

CSS

.container {
  max-width: 200px;
  margin: 5px;
}

.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="container">
  <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>
</div>

<div class="container">
  <div class="main-text">Lorem ipsum <span></span></div>
</div>

<div class="container">
  <div class="main-text">Lo <span></span></div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>

登入後複製

以上是如何使用省略號截斷文字並附加'123 T.”在下一行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！