Wie kann ich mit JavaScript die Größe eines DIV dynamisch an umschlossenen Textinhalt anpassen?

Dynamische DIV-Größenanpassung für umbrochenen Text mit JavaScript erreichen

Ein DIV allein mit CSS auf die Größe des umbrochenen Textinhalts zu verkleinern, stellt eine Herausforderung dar. Allerdings kann JavaScript verwendet werden, um diese Einschränkung zu überwinden und das gewünschte Verhalten zu erreichen.

Im bereitgestellten Codebeispiel weist das DIV-Element („shrunken“) mit einer maximalen Breite von 130 Pixeln aufgrund des Textumbruchs unerwünschte Ränder auf . Um dieses Problem zu beheben, wird JavaScript genutzt, um die tatsächliche Breite des umschlossenen Inhalts zu berechnen und die DIV-Größe entsprechend anzupassen.

<code class="js">const range = document.createRange();
const text = p.childNodes[0];
range.setStartBefore(text);
range.setEndAfter(text);
const clientRect = range.getBoundingClientRect();
p.style.width = `${clientRect.width}px`;</code>

Dieses Code-Snippet verwendet die Funktion createRange(), um einen Bereich zu definieren, der den umschlossenen Inhalt umfasst Text. Anschließend berechnet getBoundingClientRect() das Begrenzungsrechteck für den definierten Bereich und bestimmt so effektiv die Breite des Textinhalts. Schließlich wird die Breite des DIV dynamisch so eingestellt, dass sie mit dieser Breite übereinstimmt, was zu einer genauen Passform um den umbrochenen Text führt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript die Größe eines DIV dynamisch an umschlossenen Textinhalt anpassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!