"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Separar palabras con CSS

Separar palabras con CSS es una tarea muy importante pues impacta directamente en la legibilidad de nuestro contenido. Y al mismo tiempo tiene cierta complejidad pues existe distintas reglas para realizar esto y a día de hoy no hay una solución perfecta.

Vamos a entrar en detalle, cuando dentro de nuestra página tenemos palabras con una longitud muy grande vamos a tener que especificar reglas de CSS para formatear bien esos casos.

Veamos algunas reglas de CSS que nos van a ser útiles cuando se presentan casos como este.

La propiedad hyphens

Una de las técnicas habituales en la escritura tradicional a la hora de separar palabras muy largas es la de usar guiones.

No le estoy descubriendo nada a nadie, porque esto nos lo enseñan en el colegio desde que somos pequeños, lo que igual no sabías es que para separar palabras con CSS puedes usar esta misma técnica usando la propiedad hypens.

Vamos a analizar como funciona, hypens al igual que hacemos nosotros separa la palabra cuando no cabe en una linea de texto usando un guion.

Pero al igual que nosotros no se puede separar la palabra por donde nos de la gana, se separan las sílabas de una palabra, de manera que para que nuestra página pueda separar las palabras usando esta propiedad tiene que conocer las reglas del lenguaje.

Por tanto uno de los requisitos para usarlo es definir en que idioma está el texto, y esto lo podemos hacer definiendo el atributo lang en la etiqueta html de nuestra web.

Como limitación nos encontramos con que la propiedad hypens no es soportada por todos los navegadores, aquí tenemos el estado de implementación actual.

La propiedad hypens como se indica en este link, necesita de prefijos para que funcione en ciertos navegadores como explorer o los basados en webkit (chrome y safari).

De manera que a día de hoy si le queremos dar soporte la escribiremos así…

Esta propiedad puede tomar como valor none | manual | auto.

Con none nunca se divide la palabra con guiones cuando se produce un salto de linea, aunque estemos usando otras propiedades que fuerzan que la palabra se rompa como word-break con el valor none jamás se pondrán guiones.

Con manual las palabras se rompen y se añaden los guiones cuando se detectan caracteres que marcan un potencial salto de linea, es decir, que tenemos que incluir en los textos ciertos caracteres unicode que marcan un punto de ruptura para esa palabra.

Estos caracteres de los que hablamos son:

  • U + 2010 (HYPHEN) El carácter de guion «duro» indica de forma visible un punto de ruptura para realizar un salto de linea, como deciamos lo indica de forma visible lo que quiere decir que el guion se escribe siempre, rompa la linea o no.
  • U + 00AD (SHY)El carácter de guion «suave» indica de forma invisible un punto de ruptura para realizar un salto de linea, esto significa que le sugiere al navegador un punto donde puede romper la palabra y hacer el salto de linea si procede, en caso de ser necesario la palabra se rompe y el guion se muestra, si no fuera necesario hacer un salto de linea el guion no se muestra.

Con auto las palabras se separan en primer lugar según los caracteres vistos arriba (guiones duros y suaves), y en caso de no existir, se basa en las reglas de separación de sílabas propias de cada idioma.

Las propiedades word-wrap y overflow-wrap

La anterior propiedad nos permitía separar las palabras con guiones, con las propiedades word-wrap y overflow-wrap podemos separarlas también pero en este caso sin añadir ningún tipo de guion.

La ventaja que tienen estas propiedades es que son más sencillas de implementar y además tienen un mayor soporte en los navegadores, por eso son las que habitualmente se usan.

Realmente todos los navegadores soportan una de las dos, en un principio el nombre que recibió fue el de word-wrap, pero en los últimos borradores del lenguaje CSS se le cambió el nombre a overflow-wrap.

Por supuesto cada navegador implementa estos cambios al ritmo que le da la gana, así que tenemos algunos que entienden la primera y otros que ya entienden la segunda.

Teniendo presente esta casuística lo que se suele hacer es usar el atributo más moderno, pero dejar también el otro a modo de fallback para que todos los navegadores entiendan lo mismo, podemos hacer algo así…

Existe otra propiedad llamada word-break, aunque no tiene que ver directamente muchas personas confunden las propiedades que hemos citado con esta, y no son lo mismo, aclaro la diferencia por si acaso.

Mientras que word-wrap y overflow-wrap le indican al navegador si puede romper o no una palabra cuando es tan larga que desbordaría la caja que la contiene, word-break le indica por donde puede romper la palabra en cuestión.

Como word-wrap y overflow-wrap solo separan palabras largas, si que se pueden combinar con la propiedad hypens para añadirle guiones. En cambio con word-break no podemos porque separa por cualquier sitio las palabras (no le importa si es más corta o más larga, la palabra se rompe siempre cuando llega al límite del contenedor).

Para ver todo esto de manera más sencilla vamos a terminar viendo unos ejemplos de uso.

Estas son las palabras más largas según la RAE, veamos que pasa con las reglas aplicadas arriba.

  • Electroencefalografista
  • Esternocleidomastoideo
  • Electroencefalografía
  • Electroencefalograma
  • Otorrinolaringólogo

Estas son las palabras más largas según la RAE, veamos que pasa con las reglas aplicadas arriba.

  • Electroencefalografista
  • Esternocleidomastoideo
  • Electroencefalografía
  • Electroencefalograma
  • Otorrinolaringólogo

Estas son las palabras más largas según la RAE, veamos que pasa con las reglas aplicadas arriba.

  • Electroencefalografista
  • Esternocleidomastoideo
  • Electroencefalografía
  • Electroencefalograma
  • Otorrinolaringólogo

Vamos a explicar que ha pasado en cada caso.

1. En el primer ejemplo usando word-break: break-all; le estamos diciendo que la estrategia es que rompa la palabra por cualquier caracter tan pronto llegue al final del contenedor. Con esto vemos que un párrafo todas las lineas llegan hasta el final del espacio disponible y rompen donde les cuadra.

2. El segundo ejemplo es aplicando word-wrap / overflow-wrap: break-word; y vemos ya que es muy diferente en el párrafo, las palabras saltan de linea cuando no cogen en el contenedor, salvo en el caso de aquellas palabras que ya de por sí son mas largas que el propio ancho del contenedor, a esas no les queda otra que romper cuando ya no les queda sitio (igual que en el primer ejemplo).

3. Por último tenemos la opción más completa que es usando word-wrap / overflow-wrap: break-word; y hyphens: auto; en este caso las palabras no saltan de linea cuando calcula que no caben, sino que calcula cual es la última sílaba que entraría y ahí es donde hace el salto de linea.

Lo mismo sucede con las palabras que ya de por sí son más grandes que el propio contenedor donde están, se calcula la última sílaba que entra, se le añade un guion y luego salta de linea.

Espero que el artículo os sea útil.

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)