textos_muy_largos_que_quiebran_nuestro_layout

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

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Animaciones CSS3 al fin del ciclo

Animaciones CSS3 al fin del ciclo

Existe una propiedad CSS3 muy tímida y poco manejada pero que cumple un papel esencial cuando estamos trabajando con animaciones CSS3. Supongamos que estamos creando una animación simple, que no necesitamos sea cíclica, por lo tanto, la ejecutaremos sólo 1 vez. La escribimos y la aplicamos, como a continuación: /* creando la animación */ @keyframes [...]

Animaciones CSS3 avanzadas

Animaciones CSS3 avanzadas

He estado impaciente para darme la libertad de investigar y escribir algo más avanzado utilizando CSS3 y animaciones, ya que el soporte de ciertas propiedades están más extendidas y si las comenzamos a utilizar en nuestros proyectos podemos forzar un poco la adaptación de estos nuevos estándares. Mi idea no es utilizarlas aún al 100%, [...]

Dando estilos a placeholder

Con HTML5 llegaron muchas nuevas etiquetas y atributos, y se nota que en la W3C se esforzaron en la captura de datos. Los formularios tuvieron muchas mejoras y en este artículo mostraré como manipular un útil atributo: placeholder. Placeholder permite integrar un texto predefinido dentro de un campo de texto (<input>). En general este texto [...]

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

    Ya la conozco gracias a ti.

    fearlex
    12 / Septiembre / 2007

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

    latejedora
    14 / Septiembre / 2007

  3. 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

    Claudio
    25 / Septiembre / 2007

  4. 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!.

    John
    06 / Octubre / 2007

  5. 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!

    Eduardo
    01 / Febrero / 2008

  6. 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!

    Daxion
    29 / Noviembre / 2008

  7. 000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000

    gaston
    22 / Octubre / 2009

  8. Gracias!!!! buen aporte muerte a IE6 U_U

    Saludos de Peru

    Fernando
    02 / Noviembre / 2009

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

    RIP 3:16
    10 / Noviembre / 2009

  1. [...] Muchas veces son enlaces muy largos o palabras en los comentarios, que al ser tan extensas exceden el ancho ...
    Palabras largas que rompen nuestro layout ~ Gran Impetu
  2. [...] textos_muy_largos_que_quiebran_nuestro_layout [...]
    » Pronto… | CSSLab
  3. [...] min-height para definir un alto mínimo para un contenedor, pero se puede conseguir con este truco. Textos muy largos ...
    Hacks CSS « ddsign
  4. [...] to be taken into when the user resizes the browser: images that doesn’t fit the width, texts wrapping as ...
    CSSLab - jQuery browserSizr

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 3 veces