CSS peut-il agrandir verticalement une zone de texte pour l'adapter à son contenu ?

Ajustement automatique de la hauteur de la zone de texte avec CSS

Dans le développement Web, vous devez souvent créer des zones de texte qui peuvent automatiquement ajuster leur hauteur pour s'adapter le contenu saisi par les utilisateurs. Bien que PHP et JavaScript offrent des solutions à ce problème, il existe une solution de contournement CSS élégante qui permet d'obtenir le même effet sans avoir recours à un code complexe.

Pouvez-vous utiliser CSS pour agrandir verticalement une zone de texte pour l'adapter à son contenu, de la même manière que Propriété "overflow:show" pour les divs ?

La réponse est oui ! En utilisant une combinaison intelligente de propriétés CSS, vous pouvez permettre à une zone de texte d'ajuster dynamiquement sa hauteur en fonction de sa hauteur de défilement. Voici ce que vous devez faire :

<textarea name="text" oninput=' this.style.height = "";this.style.height = this.scrollHeight "px"'></textarea>

Cette seule ligne de code fonctionne comme suit :

• this.style.height = ""; : Cette ligne réinitialise la hauteur de la zone de texte à sa valeur par défaut, lui permettant de rétrécir si nécessaire.
• this.style.height = this.scrollHeight "px": Cette ligne définit dynamiquement la hauteur de la zone de texte égale à sa hauteur de défilement (la hauteur de son contenu visible) plus un petit remplissage pour tenir compte du débordement potentiel de contenu.

Avec cette solution CSS, vous pouvez créer des zones de texte qui s'agrandissent et se rétrécissent automatiquement pour s'adapter à leur contenu, offrant ainsi une expérience d'édition conviviale sans avoir besoin de codage supplémentaire.

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!