EspañolDeutschFrançaisItalianoPortuguêsРусскийΕλληνικά日本語中文(简体)हिन्दी; हिंदीالعربية
PF Preguntas - Foro

Cómo evitar que el texto, dentro de una etiqueta pre, se salga del contenedor

Programación CSS  
 
Cómo evitar que el texto, dentro de una etiqueta pre, se salga del contenedor

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.

Únete al canal de Telegram

Déjanos un comentario o entra al  Foro
Share on Facebook Tweet about this on Twitter Share on Google+ Pin on Pinterest Share on Reddit Share on VK Share on StumbleUpon Share on Tumblr Share on LinkedIn Email this to someone Print this page