Css3

Evitar que pre y code se salgan del contenedor

Por : Jhons_1101
2016-10-22
Tags :
Resulta que los elementos <pre> y <code> cuentan con un display por defecto (block) e (inline) respectivamente.
Al contar con estas propiedades el texto inmerso en el ancho del contenedor se desborda. Lo que queremos lograr es envolver (Wrap) la cadena de texto, segmentando cuando llegue al final de la linea, respecto a su padre. (contenedor).


compartir en facebook compartir en Google compartir en Twitter compartir en Blogger compartir como código embebido compartir la url
Con la propiedad de CSS white-space especificamos cómo se gestiona un espacio en blanco dentro de un elemento. y con el valor pre-wrap especificamos que el texto nunca terminará y generará nuevas líneas según lo requiera.

Como la etiqueta white-space no es compactible con todos los navegadores, debemos de colocar los prefijos para cada navegador.

white-space IcanUse

Tambien pueden probarlo en http://caniuse.com/ presionando Aquí

Veamos el fuente

    

    /* En una hoja de estilos definimos estilos para las propiedades */
    .pre, .code {
        white-space: pre-wrap; 
        white-space: -moz-pre-wrap; 
        white-space: -o-pre-wrap; 
        word-wrap: break-word; 
    }
    div {
        width:600px;
        background: #e0e0e0;
        height:200px;
        padding:5px 15px;
        font-size:15px;
    }
    


    

    /* En una hoja de estilos definimos estilos para las propiedades */
    <div>
        <pre>
        Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar 
        </pre>
    </div>

    <div>
        <pre class="pre">
        Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, 
        </pre>
    </div>
    






Si este contenido te fue útil, no olvides compartirlo en redes sociales, Considéralo. Puede ser la manera de agradecer!


Agrega tu comentario...

Puedes utilizar etiquetas <pre></pre>, <p></p>, <div></div>, + (Nombre usuario, para responderle a alguien)

o3tmzUA





Este post no tiene comentarios, sé el primero en hacerlo

white space i can use



Evidencia de funcionamiento white space


evidencia de funcionamiento white space




Unete al grupo de whatsApp +57 316 392 6456

Sigue el grupo en facebook

Siguenos.....