Cómo hacer que elementos HTML como pre y textarea eliminen las barras de desplazamiento, se ajusten automáticamente y adapten la altura del contenido del texto

El área previa y de texto en HTML puede mostrar texto preformateado. es decir, preservar espacios y nuevas líneas. En lugar de tener que agregar elementos HTML como <br> y &nbsp; para agregar saltos de línea y espacios de impresión.

Cuando se muestra previamente contenido de texto, no se ajustará automáticamente. Puede agregar algo de CSS para resolver este problema:

 <pre>ourjs esto es muy muy muy muy muy muy muy muy muy muy muy muy muy contenido de inicio de sesión.</pre>pre { word-wrap: break-word; white-space: pre-wrap padding: 9.5px; ; color de fondo: #f5f5f5; borde: 1px sólido #ccc;}

Textarea hace que la altura se adapte a la altura del contenido

Textarea también puede conservar el formato de contenido como anterior, pero la altura del elemento es fija y no se puede ajustar con CSS. En este momento, puede utilizar el atributo scrollHeight.

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

Aquí se agrega un relleno de 12px.

Lo anterior es lo que el editor le presenta sobre cómo hacer que los elementos HTML como pre y textarea eliminen la barra de desplazamiento, ajusten automáticamente el contenido del texto y se adapten a la altura del texto. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor responderá de inmediato a todos. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!

Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!