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

Pseudo contenido con CSS

La propiedad CSS content: “”; viene siendo utilizada para entregar más estilos donde no necesitas extra marcado con HTML. Su soporte es amplio (IE8+ y demases browsers modernos). Su uso está atado a los pseudo-elementos :after y :before y permite generar contenido (de tipo texto) en dicho pseudo-elemento. Un ejemplo básico: div { color: blue; [...]

Propiedades del olvido 2: clip

La propiedad clip determina el área de un elemento. Tal cual, con esta propiedad muy poco utilizada puedes cortar, por ejemplo, una imagen que sea mayor que su contenedor sin tener que recurrir a cambiar su width o height (deformarla) o abrir tu editor gráfico favorito y aplicar el corte a mano. Si prefieren, pueden [...]

Selectores avanzados de atributos

Con este artículo les mostraré una manera de cómo CSS realmente potencia la presentación de un sitio, aportando más hacia la accesibilidad y usabilidad que a los muchos argumentos que hemos entregado hasta ahora. CSS2 nos permite aplicar estilos a elementos basándose en los atributos definidos en las etiquetas HTML, incluso a los valores contenidos [...]

  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