So zeigen Sie Ellipsen über zwei Zeilen hinaus in CSS an

In CSS kann das Textüberlaufattribut verwendet werden, um Auslassungspunkte anzuzeigen, wenn der Textinhalt den angegebenen Bereich überschreitet, wodurch die Seite schöner wird. Im Folgenden finden Sie eine detaillierte Einführung:

1. Text-Overflow-Eigenschaft

Die Text-Overflow-Eigenschaft in CSS wird verwendet, um festzulegen, was geschehen soll, wenn der Inhalt eines Elements seine Box überläuft. Es gibt drei häufig verwendete Werte:

• clip: Beschneidet den Text, um ihn an die Elementbreite anzupassen. Blockiert den Text hinter dem Inhalt und zeigt die Auslassungspunkte nicht an.
• Auslassungspunkte: Zeigt Auslassungspunkte (...) an, um ausgeschnittenen Text anzuzeigen.
• Zeichenfolge: Ändern Sie das Auslassungszeichen in die angegebene Zeichenfolge.

Im Beispiel unten können wir sehen, dass, wenn der Text den übergeordneten Container überläuft, Ellipsen verwendet werden, um den Inhalt abzukürzen.

div {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Das White-Space-Attribut wird verwendet, um anzugeben, wie mit dem Leerraum innerhalb des Elements umgegangen wird, und Nowrap bedeutet, dass der Text nicht umbrochen wird. Das Überlaufattribut wird verwendet, um anzugeben, wie mit einem Überlauf des Elementinhalts umgegangen werden soll. Ausgeblendet bedeutet, dass der übergelaufene Inhalt ausgeblendet wird.

2. Kombiniert mit dem Attribut „max-height“

Wenn ein Element zu viel Text enthält, müssen Sie die Anzahl der angezeigten Textzeilen begrenzen, indem Sie die Höhe festlegen. Wenn Sie die Höhe begrenzen und dann das Text- verwenden. Wenn Sie das Überlaufattribut verwenden, stellen Sie möglicherweise fest, dass die Ellipsen immer noch nicht angezeigt werden können.

Der Grund dafür ist, dass der Textüberlauf nur bei Elementen auf Blockebene mit fester Breite funktioniert. Daher müssen wir das Attribut max-height kombinieren, um dieses Problem zu lösen.

Im folgenden Beispiel legen wir die maximale Höhe des Elements auf drei Zeilen fest. Wenn der Text mehr als drei Zeilen beträgt, verwenden Sie Ellipsen, um den Inhalt abzukürzen.

div {
  width: 150px;
  max-height: 3em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Unter diesen wird das Attribut -webkit-line-clamp verwendet, um die Anzahl der Textzeilen anzugeben, und das Attribut -webkit-box-orient wird verwendet, um die Textrichtung anzugeben. Vertikal bedeutet, dass der Text vertikal angeordnet ist.

3. Kombiniert mit JavaScript

Die oben genannten Methoden basieren alle auf der Implementierung des CSS-Stils. Wenn Sie den Inhalt des Artikels dynamisch anzeigen möchten, müssen Sie ihn mit JavaScript kombinieren.

Bestimmen Sie, ob die Auslassungspunkte angezeigt werden müssen, indem Sie die tatsächliche Höhe des Elements und die tatsächliche Höhe des Inhalts berechnen. Hier ist ein einfaches Beispiel:

var element = document.querySelector('.element');
var contentHeight = element.scrollHeight;
var elementHeight = parseInt(getComputedStyle(element).height);

if (contentHeight > elementHeight) {
  element.addEventListener('click', function() {
    this.classList.toggle('expand');
  });
}

In diesem Beispiel ermitteln wir zunächst die Höhe des Elementinhalts und die tatsächliche Höhe des Elements. Wenn die Inhaltshöhe größer als die Elementhöhe ist, fügen wir dem Element ein Klickereignis hinzu und Anzeigen oder Ausblenden des Textes über CSS-Inhalte.

4. Andere Hinweise

   • Die Eigenschaft text-overflow funktioniert nur bei einzeiligen Elementen oder Elementen auf Blockebene mit einer definierten Breite.
   • Bei Verwendung des Text-Overflow-Attributs sollte das White-Space-Attribut „nowrap“ sein.
   • In Kombination mit dem Attribut „max-height“ sollte das Attribut „white-space“ normal sein und das Attribut „-webkit-line-clamp“ sollte verwendet werden, um die Anzahl der Zeilen anzugeben.
   • Verschiedene Browser unterstützen das Textüberlaufattribut möglicherweise unterschiedlich. Bitte verwenden Sie es mit Vorsicht.

Im Allgemeinen kann die Verwendung des Textüberlaufattributs dazu führen, dass die Seite schöner wird und der Inhalt des Artikels besser angezeigt wird. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie Ellipsen über zwei Zeilen hinaus in CSS an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!