Heim > Web-Frontend > CSS-Tutorial > Wie verkleinert man ein DIV mithilfe von JavaScript dynamisch auf umbrochenen Text?

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

Mary-Kate Olsen
Freigeben: 2024-10-29 10:03:29
Original
963 Leute haben es durchsucht

How to Dynamically Shrink a DIV to Wrapped Text Using JavaScript?

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>
Nach dem Login kopieren

Dieser Codeausschnitt führt Folgendes aus:

  1. Erstellt einen Bereich, der den Text kapselt.
  2. Ruft das clientRect des Textes.
  3. Setzt die Breite des DIV auf die Breite des
  4. 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>
Nach dem Login kopieren
<code class="css">p {
  max-width: 250px;
  padding: 10px;
  background-color: #eee;
  border: 1px solid #aaa;
}

#bad {
  background-color: #fbb;
}</code>
Nach dem Login kopieren
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!

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage