Ya no necesitas indagar más en otros sitios porque estás al lugar adecuado, tenemos la respuesta que deseas pero sin complicarte.
Solución:
Actualización 2020 – Uso contenteditable
Debido a que esta respuesta todavía ayuda a algunas personas de vez en cuando, tuve ganas de actualizar mi respuesta con el último hallazgo de Chris Coiyer.
Tenga cuidado, todavía no es una solución CSS3. Pero está integrado en el navegador y recrea el comportamiento buscado del OP.
Utilizando contenteditable HTML attribute en un
div y expandir a medida que el usuario rompe la línea. Entonces, simplemente disfraza tu div en un
.expandable-textarea
border: 1px solid #ccc;
font-family: inherit;
font-size: inherit;
padding: 1px 6px;
display: block;
width: 100%;
overflow: hidden;
resize: both;
min-height: 40px;
line-height: 20px;
La única advertencia de esta solución es que no estamos usando áreas de texto. Tenga en cuenta que algunas de las características, como el marcador de posición, requerirán un poco de creatividad para implementarse utilizando un
Fuente: El gran Chris Coiyer. Enlace a su blog
Respuesta original: solución alternativa usando una biblioteca JS liviana
Desafortunadamente, parece que no puedes hacer esto solo con CSS3.
Perohay una alternativa JS minimizada de 3.2k para hacerlo.
Aquí está el enlace que incluye demostración y uso.
Puedes instalarlo haciendo npm install autosize y usando de esta manera
autosize(document.querySelector('.yourTextAreaClass'));
O estilo jQuery
autosize($('.yourTextAreaClass'));
Y funciona como un encanto. Es liviano y tiene una sensación natural a diferencia de muchos ajustes automáticos que están haciendo animaciones inútiles.
Chris Coyier (de la fama de CodePen) acaba de publicar una implementación de esto solo CSS basada en cuadrícula. Del CodePen original de Chris Coyier – 30 de octubre de 2020
.grow-wrap /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */ display: grid; .grow-wrap::after /* Note the weird space! Needed to preventy jumpy behavior */ content: attr(data-replicated-value) " "; /* This is how textarea text behaves */ white-space: pre-wrap; /* Hidden from view, clicks, and screen readers */ visibility: hidden; .grow-wrap>textarea /* You could leave this, but after a user resizes, then it ruins the auto sizing */ resize: none; /* Firefox shows scrollbar on growth, you can hide like this. */ overflow: hidden; .grow-wrap>textarea, .grow-wrap::after /* Identical styling required!! */ border: 1px solid black; padding: 0.5rem; font: inherit; /* Place on top of each other */ grid-area: 1 / 1 / 2 / 2; body margin: 2rem; font: 1rem/1.4 system-ui, sans-serif; label display: block;
Licencia:
Derechos de autor (c) 2020 por Chris Coyier (https://codepen.io/chriscoyier/pen/XWKEVLy)
Por la presente se otorga permiso, sin cargo, a cualquier persona que obtenga una copia de este software y los archivos de documentación asociados (el “Software”), para operar con el Software sin restricciones, incluidos, entre otros, los derechos de uso, copia, modificación, fusión , publicar, distribuir, otorgar sublicencias y/o vender copias del Software, y permitir que las personas a las que se les proporcione el Software lo hagan, sujeto a las siguientes condiciones:
El aviso de derechos de autor anterior y este aviso de permiso se incluirán en todas las copias o partes sustanciales del Software.
EL SOFTWARE SE PROPORCIONA “TAL CUAL”, SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O IMPLÍCITA, INCLUYENDO, ENTRE OTRAS, LAS GARANTÍAS DE COMERCIABILIDAD, IDONEIDAD PARA UN FIN DETERMINADO Y NO VIOLACIÓN. EN NINGÚN CASO LOS AUTORES O LOS TITULARES DE LOS DERECHOS DE AUTOR SERÁN RESPONSABLES DE CUALQUIER RECLAMACIÓN, DAÑOS U OTRA RESPONSABILIDAD, YA SEA EN UNA ACCIÓN DE CONTRATO, AGRAVIO O DE CUALQUIER OTRO TIPO, QUE SURJA DE, FUERA DE O EN RELACIÓN CON EL SOFTWARE O EL USO U OTROS TRATOS EN EL SOFTWARE.
valoraciones y reseñas
Te invitamos a añadir valor a nuestra información tributando tu veteranía en las observaciones.