Comment dimensionner dynamiquement un DIV en contenu texte enveloppé avec JavaScript ?

Réaliser un dimensionnement dynamique des DIV pour le texte enveloppé à l'aide de JavaScript

Réduire un DIV dans la mesure du contenu de texte enveloppé à l'aide de CSS seul pose un défi. Cependant, JavaScript peut être utilisé pour surmonter cette limitation et obtenir le comportement souhaité.

Dans l'exemple de code fourni, l'élément DIV ("rétréci") avec une largeur maximale de 130 px présente des marges indésirables en raison du retour à la ligne du texte. . Pour résoudre ce problème, JavaScript est exploité pour calculer la largeur réelle du contenu encapsulé et ajuster la taille du DIV en conséquence.

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

Cet extrait de code utilise la fonction createRange() pour définir une plage qui englobe le contenu encapsulé. texte. Ensuite, getBoundingClientRect() calcule le rectangle englobant pour la plage définie, déterminant ainsi la largeur du contenu du texte. Enfin, la largeur du DIV est définie dynamiquement pour correspondre à cette largeur, ce qui permet un ajustement parfait autour du texte enveloppé.

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!