La partición en web es otra de las cuentas pendientes de la estandarización de CSS entre navegadores. De ahí este artículo en el que repasamos las distintas técnicas de partición CSS y damos una solución multi-navegador.
Word-wrap
Word-wrap es la propiedad más antigua de partición y está soportada por todos los navegadores desde sus versiones más tempranas. Creado inicialmente por Microsoft para IE 5.5 fue posteriormente adoptada por el resto de navegadores. La versión actual y no propietaria de esta propiedad es overflow-wrap, mientras word-warp ha quedado como alias y continúa siendo la única compatible con todos los navegadores.
Soporta los valores normal y break-word. Éste segundo partirá las palabras que sean demasiado largas pero sólo para evitar el overflow de un elemento de bloque, no evitará los huecos en las líneas.
Word-break
Este método funciona como el anterior pero además aporta dos mejoras sobre ese:
Por un lado soporta modificaciones dinámicas del width por Javascript.
Y por otro aporta dos valores más: break-all y keep-all
word-break: break-all. Éste permite cortar palabras en cualquier carácter para evitar el overflow.
word-break: keep-all. Romperá las palabras por cualquier carácter excluyendo los CJK (Chinese/Japanese/Korean). Es un valor no soportado por algunos navegadores móviles minoritarios.
Personalmente no considero de utilidad estos dos valores ya que no respetan la partición natural de las palabras.
word-break: break-word, por otro lado, es un valor no oficial soportado sólo por Chrome, Safari y otros navegadores Webkit/Blink, con el mismo resultado que word-wrap: break-word.
Hyphens
Esta propiedad es la que con diferencia tiene un mejor resultado, añadiendo un guion en el corte y siguiendo las reglas de partición de cada idioma. Por ello es necesario definir el atributo lang del tag html para que funcione correctamente.
El inconveniente es que Chrome sólo los soporta en las plataformas Android y Mac de momento y sólo en el modo auto. Esperemos que eso cambie pronto para que la muy esperada partición sea realidad en documentos web.
Actualización 20/05/2021: Parece que finalmente llegó el soporte esperado. Sólo 9 días después de la última actualización que hice (ver siguiente nota de actualización), el día 29/01/2021, Chrome entregó su versión 88 en la que daba soporte a CSS hyphens en todos los entornos y para todos los valores.
Otros navegadores móviles como IE Mobile, Opera Mobile o Blackberry tampoco lo soportan. IE le da soporte a partir de su versión 10 y Edge usando la versión con prefijo -ms-.
Actualización 20/01/2021: Curiosamente Internet Explorer y Edge son los que mejor aplicación hacían de la partición
hasta que Edge ha adoptado Webkit como motor de renderizado y perdido el soporte.Se puede ver en la imagen de la izquierda cómo corta a la perfección todas las palabras, incluso aquellas como «Electroencefalografista», en que Firefox falla en el intento, a pesar de tener supuestamente soporte. Sin embargo, en los testes realizados, consigue cortar correctamente «supercalifragilísticoespialidoso» añadiendo los guiones tal como hace IE en el ejemplo de la izquierda,
cosa que las versiones móvil y Mac de Chrome no hacen, de hecho ni siquiera las parten. Además el uso de los guiones en la partición es inconsistente entre dispositivos incluso usando la misma versión de Chrome.En defensa de Chrome hay que decir que cuando combinas los métodos, como haremos nosotros al final del artículo, aplica a cada palabra la mejor opción disponible, logrando así un resultado global más que aceptable.
Ejemplo de los distintos métodos
Puedes comparar el resultado de cada propiedad abriendo esta página en los distintos navegadores.
See the Pen EePLmM by Jesuke (@jesuke) on CodePen.
Conclusión
Sabiendo que word-wrap es el único soportado por todos los navegadores y que hyphens nos aporta una mejora en cuanto a las reglas y el modo de partir las palabras, a menos que debamos enfrentarnos a un texto multi-idioma con caracteres asiáticos, podemos descartar word-break de la ecuación, llegando a la siguiente solución multi-plataforma:
.breakMyWords {
/*Utilizamos hyphens para obtener la mejor partición posible*/
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
/*Y seguidamente word-wrap como graceful degradation para los navegadores que no lo soporten*/
word-wrap: break-word;
}
Aquí tenéis el ejemplo:
See the Pen xaZawM by Jesuke (@jesuke) on CodePen.
Espero que os sea útil 😉