Wie verkleinert man ein DIV mit JavaScript, damit es in umschlossenen Text passt?

Beheben von DIV-Erweiterungsproblemen mit umbrochenem Text mithilfe von JavaScript

Die Herausforderung, ein DIV so zu verkleinern, dass es in Text passt, der auf seine maximale Breite umbrochen wird, ist bei der alleinigen Arbeit mit CSS weit verbreitet. Um diese Hürde zu überwinden und ein perfekt zentriertes DIV zu erreichen, ist die Implementierung von JavaScript eine effektive Lösung.

Wie in der bereitgestellten jsfiddle dargestellt, ist der übermäßige rechte Rand um den umbrochenen Text darauf zurückzuführen, dass das DIV seine ursprüngliche Breite beibehält Wird durch die Eigenschaft „max-width“ festgelegt. Um dies zu beheben, verwenden wir den folgenden JavaScript-Ansatz:

1. Erstellen Sie einen Bereich: Mit document.createRange() erstellen wir ein Bereichsobjekt, das den Text innerhalb des Ziel-DIV umfasst .
2. Bereichsgrenzen festlegen: Die Methoden setStartBefore und setEndAfter definieren den Start- und Endpunkt des Bereichs zum Anfang bzw. Ende des Textes.
3. Begrenzendes Client-Rechteck abrufen: Die Methode getBoundingClientRect() ruft die Abmessungen des Texts innerhalb des Bereichs ab.
4. DIV-Breite aktualisieren: Die Breite des DIV wird mithilfe von dynamisch aktualisiert Die Breite des abgerufenen Client-Rechtecks ​​stellt sicher, dass sich das DIV auch beim Umbrechen an die exakte Breite des Texts anpasst.

Durch die Implementierung dieser JavaScript-Lösung können Sie das DIV effektiv verkleinern, um es an den umgebrochenen Text anzupassen, was zu einem führt zentriertes und optisch ansprechendes Layout.

Das obige ist der detaillierte Inhalt vonWie verkleinert man ein DIV mit JavaScript, damit es in umschlossenen Text passt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!