


Comment redimensionner un DIV pour l'adapter au texte enveloppé à l'aide de JavaScript ?
Oct 29, 2024 am 05:40 AMRedimensionner 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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Faire votre première transition Svelte personnalisée

Téléchargement de fichiers avec Multer dans Node.js et Express

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)
