CSS - Carácter de guion

Sintaxis y uso

La propiedad CSS hyphens controla la división de palabras con guiones en un elemento. Acepta tres valores: none, manual y auto.

1. none: Este es el valor predeterminado. Cuando se establece en none, la división de palabras se desactiva y las palabras no se dividirán con guiones, incluso si exceden el espacio disponible.

2. manual: Cuando se establece en manual, la división de palabras se activa pero solo se aplica a las palabras divididas manualmente utilizando el carácter de guion suave (­). Esto permite un control específico sobre qué palabras deben dividirse.

3. auto: Cuando se establece en auto, el navegador divide automáticamente las palabras según sea necesario para optimizar el diseño del texto basándose en reglas lingüísticas y tipográficas.

.element {
  hyphens: auto;
}

La compatibilidad de los navegadores con esta propiedad varía. La mayoría de los navegadores modernos la admiten, pero algunas versiones antiguas pueden no hacerlo. Para verificar la compatibilidad con diferentes navegadores, puedes consultar recursos en línea como Can I Use (https://caniuse.com/#feat=css-hyphens).

Al usar esta propiedad, se recomienda especificar también el atributo lang en el elemento HTML o usar la propiedad CSS lang para indicar el idioma de tu contenido de texto. Esto ayuda a aplicar las reglas correctas específicas de ese idioma.

Ten en cuenta que esta propiedad solo se aplica a elementos de nivel de bloque y elementos de bloque en línea. No funciona en elementos en línea a menos que tengan un ancho específico establecido.

Guiones con CSS

p {
  hyphens: auto;
}

p {
  hyphens: auto;
  hyphenate-limit-zone: 50px;
}

p {
  hyphens: auto;
  hyphenate-limit-chars: 4 3 8;
}

p {
  hyphens: auto;
  hyphenate-limit-lines: 2; 
}