textos_muy_largos_que_quiebran_nuestro_layout

10/sep/2007 15

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. fearlex [#]

    De veras que que he quedado con la boca abierta, no sabia la utilidad de esa propiedad :D

    Ya la conozco gracias a ti.

  2. latejedora [#]

    vaya, agradecida por este post… ayer mismo me encontré con este problema y lo solucioné a lo bestia metiéndole un
    saludos

  3. CSSLab Admin [#]

    Ya lo implemente en la hoja de estilo de CSSLab, pueden ver como resulto bien con el articulo Transparencias a prueba de browsers donde el codigo era tan largo q se pasaba detras de los comentarios. Tb lo inclui en esta columna gris de comentarios ya q han habido algunos q se pasaban.

  4. Palabras largas que rompen nuestro layout ~ Gran Impetu [#]

    [...] Muchas veces son enlaces muy largos o palabras en los comentarios, que al ser tan extensas exceden el ancho de nuestro layout. Para solucionarlo en Internet Explorer podemos usar la propiedad word-wrap y en Firefox y Opera overflow. Yo prefieron usar overflow: auto; para que una barra de desplazamiento horizontal aparezca sobre la caja del comentario, aunque podemos contar la palabra definitivamente con overflow: hidden;. [...]

  5. Claudio [#]

    Hola, mi pregunta no tiene nada que ver con el articulo solo queria saber como pudiste traducir tu pagina a todos esos idiomas, otra cosa muy buena tu pagina ayuda harto, saludos

  6. CSSLab Admin [#]

    Claudio, no lo hago yo, lo hace worldlingo.com. Yo solo linkeo a los idiomas que me parecen mas importantes. Salu2.

  7. John [#]

    Parto agradeciendo, ya que como siempre, enseñas y aportas tus conocimientos en los problemas que surgen al trabajar en diseño de páginas.
    Ahora mismo apareció uno de esos links kilométricos que destruyen el layout, probando un sistema de noticias.
    Por ello agradezco la información que compartes y que más d euna vez me ha ayudado a salir de algún problema en el diseño. ¡Gracias!.

  8. Eduardo [#]

    El hack no es para opera ni firefox, en realidad esa es la correcta forma de hacerlo.
    overflow: hidden;

    Microsoft inventó la propiedad ‘word-wrap’ asi que técnicamente no deberia usarse porque no cumple los estandares (?).

    Salu2!

  9. » Pronto… | CSSLab [#]

    [...] textos_muy_largos_que_quiebran_nuestro_layout [...]

  10. Hacks CSS « ddsign [#]

    [...] min-height para definir un alto mínimo para un contenedor, pero se puede conseguir con este truco. Textos muy largos que quiebran nuestro layout La propiedad [...]

  11. Daxion [#]

    Muy bien, me salvaste la vida hoy! alguien puso un link largo en el blog y se desarmó todo! ja, poca previsión. Sabía que existía word-wrap así que busqué y apareciste al rescate.

    @Eduardo
    En mi humilde opinión, prefiero que funcione en todos los browsers antes que cumpla estándares.

    Saludos!

  12. CSSLab - jQuery browserSizr [#]

    [...] to be taken into when the user resizes the browser: images that doesn’t fit the width, texts wrapping as not expected, columns breaking… not to mention that working with percentages in CSS is problematic among [...]

  13. gaston [#]

    000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

  14. Fernando [#]

    Gracias!!!! buen aporte muerte a IE6 U_U

    Saludos de Peru

  15. RIP 3:16 [#]

    Excelente, no tenia idea que existía eso. Podré aplicarlo a mis webs.

Deja tu Comentario

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

CSSLab