El uso de la etiqueta <pre> en HTML es una manera sencilla de visualizar contenido con formato. Se usa normalmente cuando se quiere mostrar alguna porción de código fuente o cualquier otro tipo de texto cuya apariencia va a diferir de la normal usada en el sitio web.

Al usar dicha etiqueta, si esta no tiene ningún tipo de estilo, lo más normal es que cuando se muestre en dispositivos con un tamaño de pantalla menor, el texto dentro de ella se salga del contenedor.

Como ejemplo, a continuación vemos dos textos, uno dentro de una etiqueta <p> ,con borde rojo, y otro en una etiqueta <pre> con borde verde.

Como puedes observar, dependiendo de la pantalla del dispositivo desde donde estés viendo este artículo, si el texto dentro de la etiqueta <pre> no entra por completo en el contenedor, éste se sale del mismo.

Para solucionar este problema, lo que tendremos que hacer es modificar el estilo de la etiqueta <pre> añadiendo los siguientes atributos a su css:

obteniendo un resultado como a continuación te mostramos:

Puedes verlo en la pestaña del código CSS.

De esta forma, puedes hacer que el contenido alojado en tus etiquetas <pre> no se salga del contenedor, el cual se adaptará al mismo, en función del tamaño de la pantalla.