Problemas con la etiqueta "pre" en Internet Explorer

Valoracion 3 para este artículo
Valoración media
Eva Ríos Sánchez

Eva Ríos Sánchez

Eva pertenece al área de desarrollo web de la compañía MnSoft como desarrollador senior de ésta. Su experiencia en maquetación web con CSS y XHTML le permite participar en el diseño y maquetación de grandes proyectos. Su capacidad para optimizar recursos en complejos diseños es extraordinaria.

solucion

Las etiquetas <pre> </pre> nos sirven para mantener el formato de lo que escribimos. Es decir, conservar los saltos de línea, los espacios, etc...

Suelen utilizarse cuando se tiene que mostrar en una web código que previamente se ha introducido desde un blog (ej:Wordpress).

El problema de la etiqueta <pre> </pre>, es que a veces las líneas son demasiado largas y no respetan el ancho de su contenedor.

Para evitar esto añadimos a nuestro CSS para el selector "pre" las siguientes declaraciones que soluciona este problema:

*OJO: Para este estilo es necesario utilizar algunos CSS Hacks.

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}

PROBLEMA:

Mi problema surgió cuando descubrí que en Internet Explorer, algunas palabras se repetian antes y después de saltar de línea sin ningún tipo de lógica.

En la siguiente imagén muestro un ejemplo de mi problema:

problema

SOLUCIÓN:

La solución fue otorgar al contenedor donde se encontraba la etiqueta <pre> </pre> un ancho en su estilo.

.contenedor{
width:100%;
}

Código HTML:

<div class="content">
<pre>
Este verano 2007 comienza la seccion de actividades nauticas con cursos de submarinismo los cursos que se realizaran durante todo el verano son:
</pre>
</div>

En la siguiente imagén muestro la solución del problema:

solucion