En muchos idiomas escritos, es posible dividir líneas entre sílabas y entre palabras. Esto se suele hacer 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, de esta manera, ahorrar espacio. En esos idiomas, la pausa se indica visualmente con un guion ('-').
El Módulo de texto de CSS nivel 3 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, debemos usar 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 muestra cuando ocurre 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 elementos genera un resultado como el siguiente:
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 del guion.
No usar
En el primer ejemplo, la propiedad guiones se establece en none. Esto evita que se muestre el guion suave. Para confirmar esto, ajusta el tamaño de la ventana de modo que la palabra “elit” no se ajuste a la línea visible de texto.
Cómo usar el modo manual
En el segundo ejemplo, la propiedad guiones se establece en manual, lo que significa que el guion suave solo aparecerá cuando el margen divida la palabra “elit”. Una vez más, puedes confirmar esto ajustando el tamaño de la ventana.
Cómo usar el modo automático
En el tercer ejemplo, la propiedad guiones se establece en auto. En este caso, no se necesita virgulilla, ya que el usuario-agente determinará las ubicaciones de la virgulilla automáticamente. Si cambias el tamaño de la ventana, verás que el navegador pone guiones en 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
introducir saltos de línea entre cualquier dos sílabas del texto.