CSS - Guiones
La Propiedad hyphens
La propiedad CSS hyphens se utiliza para controlar cómo deben dividirse las palabras con guiones cuando el texto se extiende a lo largo de varias líneas. Indica al navegador si debe dividir las palabras con guiones y cómo hacerlo al ajustar el contenido del texto. La propiedad hyphens acepta tres valores posibles: none, manual y auto.
El valor predeterminado de la propiedad hyphens es manual, lo que significa que las palabras solo se dividirán en los saltos de línea donde haya caracteres dentro de la palabra que sugieran oportunidades de salto de línea, como guiones (-), guiones medios (–), guiones largos (—) o guiones suaves (­). Si la propiedad hyphens se establece en none, las palabras no se dividen en los saltos de línea, incluso si los caracteres dentro de la palabra sugieren oportunidades de salto de línea. Si la propiedad hyphens se establece en auto, el navegador puede dividir automáticamente las palabras en puntos de división apropiados, siguiendo sus propias reglas.
La propiedad hyphens se hereda, lo que significa que si se establece en un elemento padre, se aplicará a todos los elementos hijos a menos que sea anulada por una regla más específica.
El Valor none
Cuando la propiedad hyphens se establece en none, las palabras no se dividen en los saltos de línea incluso si los caracteres dentro de la palabra sugieren oportunidades de salto de línea. Esto significa que si una palabra es demasiado larga para caber en la línea actual, se desbordará o se moverá a la siguiente línea en lugar de dividirse con guiones.
Consejo: Usando el valor none
p {
hyphens: none;
}En este fragmento de código, se configuran los elementos <p> para que no permitan ninguna división con guiones, incluso si hay caracteres dentro de ellos que sugieran lo contrario.
El Valor 'manual'
Cuando se usa este valor para 'hyphens', las palabras solo se dividirán en lugares donde haya caracteres que sugieran posibles divisiones, como guiones regulares o suaves (configuración predeterminada).
Consejo: Usando el valor manual
p {
hyphans: manual;
}Este código configura los elementos <p> para que solo permitan la división manual basada en la ubicación de caracteres especiales dentro de ellos.
El Valor 'auto'
Cuando se usa este valor para 'hyphens', los navegadores pueden encontrar automáticamente lugares apropiados dentro de cada instancia individual.
Control de la separación silábica
Además de la propiedad hyphens, CSS proporciona otras propiedades que permiten controlar cómo se comporta la separación silábica en tus páginas web.
La propiedad hyphenate-character te permite especificar el carácter utilizado al separar palabras. Por defecto, se usa el guion (-), pero puedes cambiarlo a cualquier otro carácter si lo deseas.
Consejo: Carácter de separación silábica
p {
hyphens: auto;
hyphenate-character: '=';
}La propiedad hyphenate-limit-chars te permite especificar el número mínimo de caracteres que deben estar presentes antes y después de un punto de separación. Acepta de uno a tres valores enteros, que representan el número mínimo de caracteres antes del punto de separación, después del punto de separación y la longitud mínima de la palabra.
Consejo: Límite de caracteres para separación silábica
p {
hyphens: auto;
hyphenate-limit-chars: 5 3 8;
}La propiedad hyphenate-limit-lines especifica cuántas líneas consecutivas pueden tener separación silábica. Acepta un valor entero.
Consejo: Límite de líneas para separación silábica
p {
hyphens: auto;
hypernate-limit-lines: 2;
}La propiedad hyphenate-limit-zone define cuánto espacio sin llenar (llamado "zona de separación silábica") se puede dejar al final de una línea antes de que se active la separación silábica. Acepta un valor de longitud.
Consejo: Zona límite para separación silábica
p {
hyphens: auto;
hyphenate-limit-zone: 8em;
}Este código establece la zona máxima de separación silábica al final de la línea en 8em para los elementos <p>.