Heim > Web-Frontend > CSS-Tutorial > Wie verstecke ich Text nach zwei Zeilen und zeige einen Überlaufindikator wie „...123 T.' an?

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

Linda Hamilton
Freigeben: 2024-12-02 12:07:11
Original
404 Leute haben es durchsucht

How to Hide Text After Two Lines and Display an Overflow Indicator like

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>
Nach dem Login kopieren
.main-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
Nach dem Login kopieren

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.";
Nach dem Login kopieren

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;
}
Nach dem Login kopieren
<div class="main-text">
  Lorem ipsum ...<span>123 T.</span>
</div>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage