Wie ändere ich die Größe eines DIV mithilfe von JavaScript so, dass es in umschlossenen Text passt?

Ändern der Größe eines DIV an umschlossenen umschlossenen Text mit JavaScript

Im Webdesign kann das Einkapseln von Text innerhalb eines DIV-Elements oft ein Dilemma darstellen. Während die Größenänderung des DIV für eine einzelne Textzeile unkompliziert ist, entsteht eine Herausforderung, wenn der Text aufgrund einer vorgegebenen maximalen Breite auf mehrere Zeilen umgebrochen wird. In solchen Szenarien behält das DIV seine ursprüngliche Größe, was zu unansehnlichen Rändern auf der rechten Seite führt.

Dieses Problem kann nicht allein durch CSS gelöst werden, sodass die Erforschung von JavaScript-Lösungen erforderlich ist. Um dies zu erreichen, können wir den folgenden JavaScript-Code nutzen:

const range = document.createRange();
const p = document.getElementById('good');
const text = p.childNodes[0];
range.setStartBefore(text);
range.setEndAfter(text);
const clientRect = range.getBoundingClientRect();
p.style.width = `${clientRect.width}px`;

Indem wir einen Bereich um den umbrochenen Text definieren, können wir die Abmessungen des umschließenden Rechtecks ​​abrufen und anschließend die Breite des DIV an diese Abmessungen anpassen. Durch diesen Ansatz wird der DIV effektiv verkleinert, sodass er genau am umbrochenen Text ausgerichtet ist. Dadurch werden unerwünschte Ränder eliminiert und eine ordnungsgemäße Ausrichtung ermöglicht.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Größe eines DIV mithilfe von JavaScript so, dass es in umschlossenen Text passt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!