Wie verstecke ich Text nach zwei Zeilen und zeige einen Überlaufindikator wie „...123 T.' an?

Ausblenden von Text nach Punkten mit einem Zweitzeilen-Überlaufindikator

Beim Anzeigen von Text mit begrenztem Platz ist es oft notwendig, ihn abzuschneiden und einen Überlauf anzuzeigen. Diese Frage beschäftigt sich mit der Herausforderung, Text, der länger als zwei Zeilen ist, auszublenden und „...123 T“ hinzuzufügen. in die zweite Zeile als Indikator.

Aktuelle Implementierung

Der bereitgestellte Code befasst sich zunächst mit diesem Problem:

<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;
}

Während dieser Diese Methode verbirgt den überschüssigen Text innerhalb von zwei Zeilen. Sie ist nicht browserübergreifend kompatibel und erfüllt möglicherweise nicht vollständig die gewünschten Anforderungen Ergebnis.

Zukünftige Lösung

Die Spezifikation schlägt eine Abkürzungseigenschaft, line-clamp, vor, die diese Aufgabe in einer Zeile vereinfachen kann:

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

Diese Eigenschaft ermöglicht die Erstellung von visuell abgeschnittenem Text mit Überlaufindikatoren.

Hacky Alternative

Bis die Line-Clamp-Eigenschaft allgemein unterstützt wird, kann eine Problemumgehung mithilfe eines CSS-Hacks erreicht werden:

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

Bei diesem Ansatz wird ein span-Element mit die versteckten Punkte und „123 T.“ Der Text wird unten rechts im Container positioniert. Ein großer Kastenschatten wird verwendet, um die Punkte zu verbergen und nur die Auslassungspunkte anzuzeigen.

Das obige ist der detaillierte Inhalt vonWie verstecke ich Text nach zwei Zeilen und zeige einen Überlaufindikator wie „...123 T.' an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!