Wie verkleinert man ein DIV mithilfe von JavaScript dynamisch auf umbrochenen Text?

Dynamisches Verkleinern eines DIV auf umschlossenen Text mit JavaScript

Das Verkleinern eines DIV zur Unterbringung von Text ist normalerweise unkompliziert. Wenn der Text jedoch aufgrund einer maximalen Breitenbeschränkung in mehrere Zeilen umgebrochen wird, wird das DIV nicht entsprechend verkleinert. Dies kann zu unschönen Rändern auf der rechten Seite des DIV führen.

JavaScript-Lösung

Da eine reine CSS-Lösung nicht machbar ist, greifen wir auf JavaScript zurück für einen dynamischen Ansatz. Der folgende Codeausschnitt veranschaulicht, wie:

<code class="javascript">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`;</code>

Dieser Codeausschnitt führt Folgendes aus:

1. Erstellt einen Bereich, der den Text kapselt.
2. Ruft das clientRect des Textes.
Setzt die Breite des DIV auf die Breite des
3. clientRect.

Beispielverwendung< /h3>

<code class="html"><p id="bad">This box has a max width but also_too_much_padding.</p>
<p id="good">This box has a max width and the_right_amount_of_padding.</p></code>

<code class="css">p {
  max-width: 250px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
}

#bad {
  background-color: #fbb;
}</code>

In diesem Beispiel werden zwei Boxen mit unterschiedlicher Polsterung erstellt. Das erste Feld zeigt das ursprüngliche Problem, während das zweite Feld die JavaScript-Lösung verwendet, um den Text dynamisch auf die Breite zu verkleinern.

Das obige ist der detaillierte Inhalt vonWie verkleinert man ein DIV mithilfe von JavaScript dynamisch auf umbrochenen Text?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!