Maison > interface Web > tutoriel CSS > le corps du texte

Comment obtenir une expansion dynamique de la hauteur d'une zone de texte avec Pure CSS ?

Linda Hamilton
Libérer: 2024-10-26 22:15:02
original
439 Les gens l'ont consulté

How to Achieve Dynamic TextArea Height Expansion with Pure CSS?

Comment obtenir une extension dynamique de la hauteur d'une zone de texte

Lorsque vous remplissez une zone de texte avec du contenu utilisateur modifiable, il est souvent souhaitable qu'elle étende automatiquement sa hauteur pour accueillir le contenu. Cela peut améliorer l’expérience utilisateur et la lisibilité. Bien que PHP et JavaScript offrent des options pour contrôler la hauteur de la zone de texte, il est également possible d'y parvenir avec du CSS pur.

Solution CSS

Pour réaliser l'expansion de la hauteur de la zone de texte à l'aide de CSS , exploitez le code suivant :

textarea {
  this.style.height = this.scrollHeight + "px";
  this.style.height = "";
}
Copier après la connexion

Ce code utilise la propriété this.style.height pour définir la hauteur de la zone de texte. La première ligne définit la hauteur sur sa « hauteur de défilement », qui correspond à la véritable hauteur du contenu. La deuxième ligne permet à la zone de texte de se réduire et de s'agrandir, garantissant ainsi qu'elle s'adapte à la longueur variable du contenu.

En implémentant ce CSS, la zone de texte ajustera automatiquement sa hauteur en fonction de la quantité de contenu, fournissant une expérience d'édition transparente et dynamique pour les utilisateurs.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!