Administra guiones con CSS

Joe Medley
Joe Medley

En muchos lenguajes escritos, es posible romper líneas entre sílabas y entre palabras. Esto se hace a menudo para que se puedan colocar más caracteres en una línea de texto con el objetivo de tener menos líneas en un área de texto y, así, ahorrar espacio. En esos lenguajes, la ruptura se indica visualmente con un guion ('-').

El nivel 3 del módulo de texto de CSS define una propiedad de guiones para controlar cuándo se muestran los guiones a los usuarios y cómo se comportan cuando se muestran. A partir de la versión 55, Chrome implementa la propiedad guiones. Según la especificación, la propiedad guiones tiene tres valores: none, manual y auto. Para ilustrar esto, usamos un guion suave (­), como en el siguiente ejemplo.

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

Un guion suave es aquel que solo se mostrará cuando ocurra en el margen final. La forma en que se renderiza este guion en Chrome 55 o versiones posteriores depende del valor de la propiedad hypens de CSS.

-webkit-hyphens: manual;
hyphens: manual;

La combinación de estos da un resultado como el siguiente:

Captura de pantalla de una sola línea

Observa que el guion suave no es visible. En todos los casos, cuando una palabra que contiene el guion suave cabe en una sola línea, el guion será invisible. Ahora, veamos cómo se comportan los tres valores de un guion.

No usar ninguno

En el primer ejemplo, la propiedad guiones se establece en none. Esto evita que se muestre el guion suave. Para confirmarlo, ajusta el tamaño de la ventana de modo que la palabra "elit" no quepa en la línea visible de texto.

Google ipsum dolor sit amet, consectetur adipiscing elit.

Usando manual

En el segundo ejemplo, la propiedad guiones se establece en manual, lo que significa que el guion suave solo aparecerá cuando el margen rompe la palabra “elit”. Una vez más, puedes confirmarlo ajustando el tamaño de la ventana.

Google ipsum dolor sit amet, consectetur adipiscing elit.

Usando automático

En el tercer ejemplo, la propiedad guiones se establece en auto. En este caso, no se necesitan guiones suaves, ya que el usuario-agente determinará las ubicaciones de los guiones automáticamente. Si cambias el tamaño de la ventana, verás que el navegador usa guiones para este ejemplo en el mismo lugar que en el segundo, aunque no hay guiones suaves. Si continúas reduciendo la ventana, verás que el navegador puede cortar las líneas entre dos sílabas del texto.

Google ipsum dolor sit amet, consectetur adipiscing elit.