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;
}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;
}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).
Comentarios
De veras que que he quedado con la boca abierta, no sabia la utilidad de esa propiedad 😀
Ya la conozco gracias a ti.
vaya, agradecida por este post… ayer mismo me encontré con este problema y lo solucioné a lo bestia metiéndole un
saludos
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.
[…] 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;. […]
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, no lo hago yo, lo hace worldlingo.com. Yo solo linkeo a los idiomas que me parecen mas importantes. Salu2.
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!.
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!
[…] textos_muy_largos_que_quiebran_nuestro_layout […]
[…] 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 […]
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!
[…] 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 […]
000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
Gracias!!!! buen aporte muerte a IE6 U_U
Saludos de Peru
Excelente, no tenia idea que existía eso. Podré aplicarlo a mis webs.