Comment réduire dynamiquement un DIV en texte enveloppé à l'aide de JavaScript ?

Réduire dynamiquement un DIV en texte enveloppé à l'aide de JavaScript

Réduire un DIV pour accueillir du texte est généralement simple. Toutefois, lorsque le texte s'étend sur plusieurs lignes en raison d'une contrainte de largeur maximale, le DIV ne parvient pas à se réduire en conséquence. Cela peut créer des marges disgracieuses sur le côté droit du DIV.

Solution JavaScript

Comme une solution CSS pure n'est pas réalisable, nous nous tournons vers JavaScript pour une approche dynamique. L'extrait de code suivant illustre comment :

<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>

Cet extrait de code effectue les opérations suivantes :

1. Crée une plage qui encapsule le texte.
2. Obtient le clientRect du texte.
3. Définit la largeur du DIV sur la largeur du clientRect.

Exemple d'utilisation< /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>

Cet exemple crée deux boîtes avec un remplissage différent. La première case illustre le problème d'origine, tandis que la deuxième case utilise la solution JavaScript pour réduire dynamiquement la largeur du texte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!