suchen

Heim >Web-Frontend >js-Tutorial >Wie implementiert man Auslassungspunkte für mehrzeiligen Textüberlauf in einem festen Container?

Wie implementiert man Auslassungspunkte für mehrzeiligen Textüberlauf in einem festen Container?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-26 16:17:03759Durchsuche

How to Implement Ellipsis for Multi-line Text Overflow within a Fixed Container?

Ellipsenbehandlung für mehrzeiligen Überlauf innerhalb eines festen Containers

In der Webentwicklung ist es häufig erforderlich, mehrzeiligen Text innerhalb eines Containers mit einer bestimmten Breite und Höhe anzuzeigen . Wenn der Text jedoch den verfügbaren Platz überschreitet, kann es zu einem unschönen Überlauf kommen. Um dieses Problem zu beheben, suchen Entwickler häufig nach Methoden zum Implementieren eines Auslassungszeichens, das darauf hinweist, dass noch mehr Text verborgen ist.

Ein solches Szenario ist, wenn der Text in einem

enthalten ist. Element mit fester Breite und Höhe. Obwohl es verschiedene jQuery-Plugins gibt, kann es eine Herausforderung sein, die perfekte Lösung zu finden. In diesem Artikel wird ein einfacher, aber effektiver Ansatz zum Erreichen des gewünschten Ergebnisses untersucht.

Die Verwendung von jQuery bietet eine bequeme Möglichkeit, den Textinhalt des

zu bearbeiten. Element. Unser Ziel ist es, das letzte Wort iterativ zu entfernen, bis die Texthöhe in die angegebene Containerhöhe passt. Dies wird erreicht, indem die Funktion „outerHeight()“ genutzt wird, um zu prüfen, ob die Texthöhe die Containerhöhe überschreitet, und, wenn dies zutrifft, die Funktion „text()“ verwendet wird, um das letzte Wort aus dem Text abzuschneiden.

Um sicherzustellen, dass die Überlauf bleibt unsichtbar, wir nutzen den Überlauf: versteckt; CSS-Eigenschaft für das

Element. Auf diese Weise erscheint das Ergebnis ohne die Auslassungspunkte visuell korrekt, auch wenn JavaScript deaktiviert ist.

Hier ist der CSS- und jQuery-Code für diese Lösung:

<code class="css">#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }</code>
<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>

Dieser Ansatz bietet a Einfache und effiziente Lösung für das Problem des Überlaufs von mehrzeiligem Text durch Handhabung von Auslassungspunkten innerhalb eines Containers mit fester Breite und Höhe. Durch die Kombination von jQuery mit CSS können Sie den gewünschten visuellen Effekt erzielen und gleichzeitig die Zugänglichkeit beibehalten, auch wenn JavaScript deaktiviert ist.

Das obige ist der detaillierte Inhalt vonWie implementiert man Auslassungspunkte für mehrzeiligen Textüberlauf in einem festen Container?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery css if for while using Property function this display overflow word
Stellungnahme：
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
Vorheriger Artikel：Wie kann ich mit Promise.all Textdaten aus einem Array von URLs abrufen und analysieren?Nächster Artikel：Wie kann ich mit Promise.all Textdaten aus einem Array von URLs abrufen und analysieren?

In Verbindung stehende Artikel

Mehr sehen