> Faqs > ¿Cómo interpretar saltos de línea como BR en HTML?

¿Cómo interpretar saltos de línea como BR en HTML?

Quisiera conseguir lo siguiente en HTML: que los saltos de línea sean interpretados como saltos de línea al renderizarse la página web. Es decir, que si en el texto del código HTML hay un salto de línea, se muestre ese salto de línea a la hora de visualizarse la página. (El comportamiento normal de un salto de línea en HTML es ignorarlo y continuar renderizando el texto en la misma línea)

Ya sé que lo correcto es usar la etiqueta <br> para implementar saltos de línea, o usar etiquetas de bloque que tienen implícito el salto de línea, pero mi objetivo sería justamente no usar esta etiqueta y que simplemente se salte a la siguiente línea cuando se encuentra un caracter de nueva línea (\n).

¿Es posible convertir los saltos de línea a <br>? pero, sin usar <br>? (ni por supuesto lenguajes de programación)

Nota: Sé también que existe una etiqueta llamada <pre> que hace más o menos eso de producir que los saltos de línea se realicen, pero tiene un inconveniente para mi y es que las líneas que son muy largas las coloca todas en la misma línea, sin romperlas convenientemente como ya hace el HTML normal

Quizás orientando así mi pregunta, ¿Puedo conseguir un comportamiento similar a <pre>, de modo que los saltos de línea se tengan en cuenta, pero que las líneas se rompan cuando no caben en la anchura del contenedor?

¿Quizás es posible hacer esto con CSS?

Respuestas

Es verdad que lo ideal es usar un <br> para hacer saltos de línea, lo más natural desde el punto de vista del HTML. Pero hay otras vías.

En CSS existe un atributo que te sirve para hacer más o menos las cosas que quieres, definiendo el comportamiento de los espacios en blanco y de los saltos de línea en el HTML.

El atributo se llama white-space y lo puedes usar para conseguir tus objetivos.

div {
    white-space: pre-line;
}

Ese sería a mi modo de ver el valor del atributo white-space que estás necesitando.

El valor pre-line produce que el comportamiento de los saltos de línea y espacios en blanco en HTML sea igual que siempre estamos acostumbrandos, solo que los saltos de línea se tienen en cuenta, tal como tú necesitas.

Mírate también otros valores de white-space que igual te sirven mejor:

  • normal: esto es el comportamiento normal del HTML
  • nowrap: No se porducen saltos de línea en ningún caso, aunque las líneas sean demasiado largas.
  • pre: Este es el comportamiento que tendría la etiqueta <pre>
  • pre-line: Este comportamiento es el descrito anteriormente, los saltos de línea se tienen en cuenta y salvo eso, funciona igual que el HTML.
  • pre-wrap: Este comportamiento sería el mismo que <pre> pero permite también saltos de línea cuando las líneas son muy grandes. A diferencia de pre-line, los espacios en blanco se tienen en cuenta también, como haría un <pre> normal.
Miguel Angel
3145 140 209 17
No sabía que esto se podía hacer con CSS. Estupenda respuesta.