Wie erstelle ich einen mehrzeiligen Textüberlauf mit Auslassungspunkten in einem Div mit fester Breite?

Browserübergreifender mehrzeiliger Textüberlauf mit angehängten Ellipsen in einer festen Breite und Höhe

Problem:

Wie Können wir eine Ellipse auf einem <div> erstellen? mit einer festen Breite und mehreren Zeilen, um sicherzustellen, dass der übergelaufene Text abgeschnitten wird?

Lösung:

Um dies zu erreichen, können wir ein jQuery-Snippet verwenden, um das wiederholt zu entfernen Lesen Sie das letzte Wort des Textes, bis es in den gewünschten Bereich passt Höhe.

Implementierung:

1. Definieren Sie das HTML-Markup für das <div> mit einer festen Breite und Höhe und einem Absatz (

   ), der den Text enthält.

2. Fügen Sie das CSS hinzu, um den Überlauf auf ausgeblendet zu setzen und sicherzustellen, dass die Kürzung unsichtbar bleibt.

3. Erstellen Sie eine jQuery-Funktion, um die Kürzung durchzuführen. Diese Funktion wird:

   • die

     -Datei abrufen. Element und speichern Sie es in der Variablen $p.

   • Berechnen Sie die Höhe des <div> und speichern Sie es in der Variablen divh.
   • Verwenden Sie eine While-Schleife, um das letzte Wort des Textes zu entfernen, bis es in die gewünschte Höhe passt. Die Schleife verwendet die Funktion text(), um den Inhalt der

     -Datei zu aktualisieren. mit dem aktualisierten, abgeschnittenen Text.

Zusätzliche Überlegungen:

1. Dieser Ansatz erfordert JavaScript zum Abschneiden. Erwägen Sie die Kombination mit serverseitiger Kürzung, um die Leistung zu verbessern.
2. Fügen Sie eine Breite hinzu: 100 % zum

   CSS, um sicherzustellen, dass es die volle Breite des einnimmt <div>.

Beispiel:

HTML

<div>

CSS

#fos {
  width: 300px;
  height: 190px;
  overflow: hidden;
}

#fos p {
  width: 100%;
  padding: 10px;
  margin: 0;
}

jQuery

var $p = $('#fos p');
var divh = $('#fos').height();

while ($p.outerHeight() > divh) {
  $p.text(function (index, text) {
    return text.replace(/\W*\s(\S)*$/, '...');
  });
}

Demo: https://jsfiddle.net/w0n5cy2j/

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen mehrzeiligen Textüberlauf mit Auslassungspunkten in einem Div mit fester Breite?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!