Wie implementiert man Ellipsen mit fester Breite und Höhe in mehrzeiligem Text?

Auslassungspunkte mit fester Breite und Höhe in mehrzeiligem Text

Mehrzeiliger Textüberlauf mit Auslassungspunkten kann innerhalb einer festen Breite und Höhe erreicht werden Höhencontainer mit JavaScript. Um das Konzept zu verstehen, stellen Sie sich ein Div mit vordefinierten Abmessungen vor, das mehrere Textzeilen enthält.

Das Ziel besteht darin, sicherzustellen, dass der Text an den angegebenen Zeilen abgeschnitten wird und Auslassungspunkte angehängt werden, um die Fortsetzung anzuzeigen. So kann es implementiert werden:

1. Überlaufeigenschaft:Setzen Sie die Überlaufeigenschaft des Div auf „versteckt“, um zu verhindern, dass der Text über seine Grenzen hinausläuft.
2. Zeilenhöhe und maximale Höhe: Geben Sie die Zeilenhöhe und die maximale Höhe für das Div an, um die Anzahl der Zeilen einzuschränken, die es aufnehmen kann.
3. Textkürzung: Verwendung jQuery entfernt wiederholt das letzte Wort des Textes, bis es in die gewünschte Größe passt. Hier ist ein Beispiel:

<code class="javascript">var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}</code>

4. Serverseitige Kürzung: Kombinieren Sie serverseitige Kürzung für mehr Leistung und um lesbaren Text ohne Auslassungspunkte anzuzeigen, wenn JavaScript deaktiviert ist.

Dieser Ansatz bietet eine grundlegende Lösung für Textüberlauf mit Auslassungspunkten innerhalb fester Grenzen. Erwägen Sie für eine umfassendere Implementierung die Implementierung einer serverseitigen Kürzung oder die Verwendung von jQuery-Plugins, die erweiterte Funktionen für die Textkürzung bieten.

Das obige ist der detaillierte Inhalt vonWie implementiert man Ellipsen mit fester Breite und Höhe in mehrzeiligem Text?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!