Wie implementiert man Auslassungspunkte für mehrzeiligen Textüberlauf in einem festen Container?-js-Tutorial-php.cn

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

Patricia Arquette

Freigeben： 2024-10-26 16:17:03

Original

637 Leute haben es durchsucht

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>

Nach dem Login kopieren

<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>

Nach dem Login kopieren

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!

Quelle：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 verhindern, dass eine externe Schaltfläche ein Formular in HTML sendet?

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

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

1687

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

1840

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1565

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...