Comment redimensionner un DIV pour l'adapter au texte enveloppé à l'aide de JavaScript ?

Redimensionner un DIV pour adopter le texte enveloppé à l'aide de JavaScript

Dans la conception Web, encapsuler du texte dans un élément DIV peut souvent poser un dilemme. Bien que redimensionner le DIV pour accueillir une seule ligne de texte soit simple, le défi survient lorsque le texte s'enroule sur plusieurs lignes en raison d'une largeur maximale prédéterminée. Dans de tels scénarios, le DIV conserve sa taille d'origine, ce qui entraîne des marges disgracieuses sur la droite.

Ce problème ne peut pas être résolu uniquement via CSS, ce qui nécessite l'exploration de solutions JavaScript. Pour y parvenir, nous pouvons exploiter le code JavaScript suivant :

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

En définissant une plage autour du texte enveloppé, nous pouvons récupérer les dimensions de son rectangle de délimitation et ensuite ajuster la largeur du DIV pour qu'elle corresponde à ces dimensions. Cette approche réduit efficacement le DIV pour l'aligner précisément sur le texte enveloppé, éliminant les marges indésirables et permettant un alignement correct.

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!