Comment réduire un DIV pour l'adapter au texte enveloppé avec JavaScript ?

Résoudre le problème d'expansion des DIV avec du texte renvoyé à la ligne à l'aide de JavaScript

Le défi consistant à réduire un DIV pour l'adapter à la largeur maximale du texte est répandu lorsque l'on travaille uniquement avec CSS. Pour surmonter cet obstacle et obtenir un DIV parfaitement centré, l'implémentation de JavaScript est une solution efficace.

Comme illustré dans le jsfiddle fourni, la marge droite excessive autour du texte enveloppé est due au fait que le DIV conserve sa largeur initiale. défini par la propriété max-width. Pour remédier à cela, nous utilisons l'approche JavaScript suivante :

1. Créer une plage : à l'aide de document.createRange(), nous créons un objet plage qui englobe le texte dans le DIV ciblé. .
2. Définir les limites de la plage : les méthodes setStartBefore et setEndAfter définissent respectivement les points de début et de fin de la plage au début et à la fin du texte.
3. Get Bounding Client Rectangle : La méthode getBoundingClientRect() récupère les dimensions du texte dans la plage.
4. Mettre à jour la largeur du DIV : La largeur du DIV est mise à jour dynamiquement à l'aide de l'option a récupéré la largeur du rectangle du client, garantissant que le DIV s'adapte à la largeur exacte du texte même lorsqu'il est enveloppé.

En implémentant cette solution JavaScript, vous pouvez réduire efficacement le DIV pour qu'il corresponde au texte enveloppé, ce qui entraîne un disposition centrée et visuellement agréable.

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!