La overflow-wrappropiedad en CSS le permite especificar que el navegador puede dividir una línea de texto dentro del elemento de destino en varias líneas en un lugar irrompible. Esto ayuda a evitar que una cadena de texto inusualmente larga cause problemas de diseño debido al desbordamiento.
.example ( overflow-wrap: break-word; )Valores
normal: el valor por defecto. El navegador romperá las líneas de acuerdo con las reglas normales de salto de línea. Las palabras o las cadenas continuas no se romperán, incluso si desbordan el contenedor.break-word: las palabras o cadenas de caracteres que son demasiado grandes para caber dentro de su contenedor se romperán en un lugar arbitrario para forzar un salto de línea. No se insertará un carácter de guión, incluso sihyphensse utiliza la propiedad.inherit: el elemento objetivo debe heredar el valor de laoverflow-wrappropiedad definida en su padre inmediato.
La siguiente demostración tiene un botón de alternancia que le permite cambiar entre normaly break-word.
Vea la demostración de Pen overflow-wrap / word-wrap de Louis Lazaris (@impressivewebs) en CodePen.
Para demostrar el problema que overflow-wrapintenta resolver, la demostración utiliza una palabra inusualmente larga dentro de un contenedor relativamente pequeño. Cuando activa break-word, la palabra se divide para acomodar la pequeña cantidad de espacio disponible, como si la palabra fuera varias palabras.
Una cadena de caracteres de espacio que no se rompen ( ) se trataría de la misma manera y también se rompería en un lugar apropiado.
overflow-wrapes útil cuando se aplica a elementos que contienen contenido generado por el usuario no moderado (como secciones de comentarios). Esto puede evitar que las URL largas y otras cadenas de texto ininterrumpidas (por ejemplo, vandalismo) rompan el diseño de una página web.
Similitudes con la word-breakpropiedad
overflow-wrapy se word-breakcomportan de manera muy similar y se pueden usar para resolver problemas similares. Un resumen básico de la diferencia, como se explica en la especificación CSS es:
overflow-wrapse utiliza generalmente para evitar problemas con cadenas largas que provocan diseños interrumpidos debido al flujo de texto fuera de un contenedor.word-breakespecifica oportunidades de envoltura suave entre letras comúnmente asociadas con idiomas como chino, japonés y coreano (CJK).
Después de describir ejemplos de cómo word-breakse puede utilizar en el contenido de CJK, la especificación dice: "Para habilitar oportunidades de descanso adicionales solo en el caso de desbordamiento, consulte overflow-wrap".
A partir de esto, podemos suponer que word-breakse usa mejor con contenido que no está en inglés que requiere reglas específicas de separación de palabras, y que puede estar intercalado con contenido en inglés, mientras que overflow-wrapdebe usarse para evitar diseños interrumpidos debido a cadenas largas, independientemente del idioma utilizado. .
La word-wrappropiedad histórica
overflow-wrapes el nombre estándar de su predecesor, la word-wrappropiedad. word-wraporiginalmente era una característica exclusiva de Internet Explorer que finalmente fue compatible con todos los navegadores a pesar de no ser un estándar.
word-wrapacepta los mismos valores que overflow-wrapy se comporta de la misma manera. Según la especificación, los navegadores "deben tratar word-wrapcomo un nombre alternativo para la overflow-wrappropiedad, como si fuera una abreviatura de overflow-wrap". Además, todos los agentes de usuario deben brindar soporte de forma word-wrapindefinida, por razones heredadas.
Ambos overflow-wrapy word-wrappasarán la validación de CSS siempre que el validador esté configurado para probar con CSS3 o superior (actualmente el valor predeterminado).
Relacionado
- descanso de palabras
- guiones
- espacio en blanco
- Manejo de URL y palabras largas
Más información
- Word-Wrap: una propiedad de CSS3 que funciona en todos los navegadores
- Envoltura de desbordamiento en W3C
- Discusión sobre Stack Overflow en
word-breakvs.overflow-wrap
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| 23 | 49 | 11 | 18 | 6.1 |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| 88 | 85 | 4.4 | 7.0-7.1 |
La compatibilidad "parcial" indicada anteriormente se debe a que los navegadores más antiguos admiten, word-wrappero no overflow-wrap. El uso de ambos puede garantizar la compatibilidad con versiones anteriores.
La versión preliminar del editor de la especificación W3C incluye un nuevo valor llamado break-spacesque trata con secuencias de caracteres de espacios en blanco "preservados". No hay soporte de navegador conocido para esta función y no está incluida en la versión de borrador de trabajo de la especificación.