Blog what I write

Etiqueta PRE, desbordamiento en gmail y solución con nl2br o white-space

post - - leave a reply -

Me he encontrado con un problema que parece afectar exclusivamente a Gmail y que ocurre al recibir un mail que contiene la etiqueta pre.

La misión de esta etiqueta es pre-formatear su contenido, con lo cual mantiene en el texto los espacios en blanco, saltos de línea, etc. Y es justamente por esa razón por la que debemos tener mucho cuidado (no soy muy amigo de emplearla).

En Gmail, por ejemplo se producía un desbordamiento horizontal, donde salia el scroll y el texto continuaba a lo largo y ancho de la ventana 🙂

Como solución, sustituir pre por un simple div en conjunción con una de estas dos opciones para el contenido que albergará:

Formatear el contenido con PHP: Podemos ayudarnos de la función nl2br que insertará los saltos de línea. Ejemplo:

    nl2br('texto con formato');

Formatear el contenido con CSS: Podemos usar la regla white-space: pre; para simular el comportamiento de la etiqueta pre. Ejemplo:

    <div style="white-space: pre;">
        texto con formato
    </div>