textos_muy_largos_que_quiebran_nuestro_layout

10/Sep/2007 123

Son excepciones, pero suceden momentos en que tienes tu layout bien ordenado y estructurado, y por esas cosas de la vida ingresas un texto muy largo (una URL de esas extensas) o en el comentario alguien lo hace, y toda la armonía que tenías en tu diseño se quiebra. No te quita el sueño, pero sí molesta. Las columnas se van a la cresta, enfin. Felizmente para esto existe una solución, y un hack. Pero, atentos pueden adelantarse, en este caso el hack no es para IE… Es para Firefox y Opera (¿?).

word-wrap

La propiedad word-wrap especifica que la línea de texto debe quebrarse si su longitud excede el especificado por él mismo, y/o la caja que lo contiene. Sus valores son: normal (por defecto, o sea, el texto seguirá siendo largo) y break-word (lo que nos interesa: la mega-palabra se cortará apenas encuentre el final del ancho definido).

p {
     word-wrap: break-word;
}

Ver ejemplo

Ahora, ¿qué demonios pasa con Firefox y Opera? ¿Porqué nos está dando problemas justo ahora? Bueno, nada es perfecto, pero tenemos que darle algún tipo de solución, o ese maldito scroll horizontal seguirá molestando. Lo que se me viene a la cabeza en estos momentos (quedo abierto a sugerencias) es que si está demás, escondámoslo.

p {
     word-wrap: break-word;
     overflow: hidden;
}

Ver ejemplo completo

Notarán que en el primer parágrafo, no tiene estilo alguno y la línea seguirá por siempre en la horizontal. En el parágrafo del medio, tiene la propiedad word-wrap aplicada pero se ve mal en Firefox y Opera. Ya la tercera y última línea de texto agregamos el overflow: hidden para que esconda lo que sobra en estos browsers que no aplican bien esta propiedad CSS 3. Fue la única solución que se me ocurrió para no desarmar el layout (total si es el caso de un link extenso, éste podrá ser clickeado de todas maneras por el área que permanece visible).

Links

Comentarios

  1. Javierexesk [#]

    tindr , tider
    http://tinderentrar.com/

  2. Fltgdm [#]

    generic clopidogrel cost – plavix brand plavix online

  3. Uhebrl [#]

    plavix buy online – plavix buy clopidogrel 75 mg canada

  4. Qojhpg [#]

    ed mizzospan pill – gold packet ed pill pillar to post home inspectors ed hopkins bluffton beaufort sc

  5. Ldpvlu [#]

    natural ed pills – erectile dysfunction due to anxiety treatment peter mansbridge ed pill

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

CSSLab