Evitar que los textos se salgan de elementos con ancho fijo. CSS3

Cuando hemos diseñado una plantilla html con elementos de ancho fijo (por ejemplo con tablas), al introducir un texto largo este se puede salir del contenedor. Sobre todo en pantallas más pequeñas (móviles, tablets etc).

Captura de pantalla de 2013-11-28 09:01:37

 

Obviamente una solución es intentar usar ancho variable, no fijo lo que hace las páginas más “responsive”. Pero si no queda más remedio o te empeñas en ancho fijo CSS3 nos da varias soluciones .

word-break: break-all rompe (salta de línea) una palabra pero ignora los espacios. Pueden quedar letras sueltas

word-wrap:break-word   intenta “romper” la palabra en comas, espacios y guiones. Si no puede corta la palabra.

Por lo tanto a mi me suele gustar más usar word-wrap que no deja una letra suelta si puede evitarlo.

A esto le podemos añadir el uso de guiones. Os lo pongo ya para cualquier navegador:

-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

Así que con word break quedaría:

-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

Y con word wrap:

word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Con word-wrap en Firefox y Opera a veces hay que usar

overflow: hidden;

 

1 comentario en «Evitar que los textos se salgan de elementos con ancho fijo. CSS3»

Deja un comentario

Resumen de nuestra Política de Privacidad

  • Responsable: SmythSys IT Consulting SLNE.
  • Finalidad: Gestionar y moderar los comentarios.
  • Legitimación: Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios: Tus datos se alojan en los servidores de OVH.
  • Derechos: Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la dirección del responsable (en nuestra política de privacidad).

Time limit is exhausted. Please reload CAPTCHA.