Estoy tratando de generar un valor de área de texto en un pre (o un div con espacio en blanco: pre para el caso). Todo funciona bien, pero se salta el último salto de línea. Entonces, si agrega texto y un salto de línea, no mostrará el salto de línea. Si agrega texto y dos saltos de línea, muestra texto y un salto de línea. Entonces, parece que el texto se está recortando. ¿Alguien puede sugerir por qué sucede esto y cómo solucionarlo?
function starter(e) { $("#output").text(e); } $('#textin').on('input',function(){ starter($('#textin').val()) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="textin"></textarea> <pre id="output" style="border:1px solid black"></pre>Encontré una respuesta después de leer ¿Cuándo se ignoran los elementos <br> dentro de un párrafo? .
Los navegadores toman un salto de línea no como un salto de línea, sino más bien como 'final de línea'.
Con eso en mente; este truco medio sucio hace el trabajo, agregando un salto de línea adicional:
function starter(e) { $("#output").text(e+'\n'); }La solución más fácil es simplemente diseñar el elemento en el que está insertando el texto con la siguiente propiedad CSS:
white-space: pre-wrap; Esta propiedad hace que los espacios en blanco y las líneas nuevas dentro de los elementos coincidentes se traten de la misma manera que dentro de un <textarea> . Es decir, los espacios en blanco consecutivos no se colapsan y las líneas se rompen en saltos de línea explícitos (pero también se ajustan automáticamente si superan el ancho del elemento).