Wie kann ich den Textüberlauf nach der zweiten Zeile mit Auslassungspunkten und einem benutzerdefinierten Zähler („...123 T.') verbergen?

Textüberlauf nach der zweiten Zeile mit Auslassungspunkten und Zähler ausblenden

Problem:

Teil ausblenden eines Textes, der mehr als zwei Zeilen umfasst, und dem Zusatz „...123 T.“ als versteckter Überlaufindikator erfordert eine clevere Lösung.

Lösung:

Während zukünftige Updates einen einfacheren Ansatz mithilfe der Line-Clamp-Eigenschaft bieten werden, finden Sie hier einen kreativen Hack dazu dies erreichen Wirkung:

CSS:

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

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

.main-text:after {
  content: "123 T.";
  display: inline-block;
  width: 40px;
  position: relative;
  z-index: 999;
  /* big box shadow to hide the ellipsis */
  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; /* cover text beneath */
  margin-left: 2px;
}

.main-text span {
  position: absolute;
  /* bottom right position */
  top: 1.2em; /* 1 line height */
  right: 0;
  padding: 0 3px;
  background: #fff; /* cover text beneath */
}

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

.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>

Diese Technik stellt sicher, dass die „.. .123 T.“ Der Indikator erscheint, nachdem der Text in der zweiten Zeile abgeschnitten wurde.

Das obige ist der detaillierte Inhalt vonWie kann ich den Textüberlauf nach der zweiten Zeile mit Auslassungspunkten und einem benutzerdefinierten Zähler („...123 T.') verbergen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!