Comment faire en sorte que des éléments HTML tels que pre et textarea suppriment les barres de défilement, s'ajustent automatiquement et adaptent la hauteur du contenu du texte

Pre et textarea en HTML peuvent afficher du texte préformaté. c'est-à-dire préserver les espaces et les nouvelles lignes. Au lieu d'avoir à ajouter des éléments HTML tels que <br> et &nbsp; pour ajouter des sauts de ligne et des espaces d'impression.

Lorsque le contenu du texte est pré-affiché, il ne s'enroulera pas automatiquement. Vous pouvez ajouter du CSS pour résoudre ce problème :

 <pre>ourjs c'est très très très très très très très très très très très très contenu de connexion.</pre>pre { word-wrap: break-word; white-space: pre-wrap: 9.5px; ; couleur d'arrière-plan : #f5f5f5 ; bordure : 1px solide #ccc ;}

Textarea rend la hauteur adaptative à la hauteur du contenu

Textarea peut également conserver le format de contenu comme précédent, mais la hauteur de l'élément est fixe et ne peut pas être ajustée avec CSS. À ce stade, vous pouvez utiliser l'attribut scrollHeight.

 var textarea = document.getElementsByTagName('textarea')[0];textarea.setAttribute('style','height:'+(textarea.scrollHeight + 12)+'px');

Un remplissage de 12px est ajouté ici.

Ce qui précède est ce que l'éditeur vous présente comment faire en sorte que les éléments HTML tels que pre et textarea suppriment la barre de défilement, enveloppent automatiquement le contenu du texte et s'adaptent à la hauteur du texte. J'espère que cela vous sera utile si vous l'avez fait. Si vous avez des questions, laissez-moi un message et l'éditeur répondra rapidement à tout le monde. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !

Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !