How to make HTML elements such as pre and textarea remove the scroll bar, wrap automatically, and adapt the height of the text content

Pre and textarea in HTML can display preformatted text. i.e. preserve spaces and newlines. Instead of having to add HTML elements such as <br> and &nbsp; to add line breaks and print spaces.

When pre displays text content, it will not wrap automatically. You can add some CSS to solve this problem:

 <pre>ourjs this is very very very very very very very very very very very very very very very logn contents.</pre>pre { word-wrap: break-word; white-space: pre-wrap; padding: 9.5px ; background-color: #f5f5f5; border: 1px solid #ccc;}

Textarea makes height adaptive to content height

Textarea can also retain the content format like prev, but the height of the element is fixed and cannot be adjusted with CSS. At this time, you can use the scrollHeight attribute.

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

A 12px padding is added here.

The above is what the editor introduces to you how to make HTML elements such as pre and textarea remove the scroll bar, automatically wrap the text content, and adapt to the height of the text. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will promptly Reply to everyone. I would also like to thank everyone for your support of the VeVb martial arts website!

If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!