en CSS

Partición CSS: word break, word wrap y hyphens

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 normalbreak-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 funciona con modificaciones dinámicas del width por Javascript.

Y por otro aporta dos valores más: break-all y keep-all

word-break: break-all: este 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.

El valor 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 guión 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.

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-.

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 😉

Deja tu comentario

Comentario