Propiedad CSS hyphens
Usa la propiedad CSS hyphens para controlar cómo se dividen las palabras. Aprende sobre sus valores y ejemplos.
La propiedad CSS hyphens controla cómo se dividen las palabras con guiones cuando el texto pasa a una nueva línea. La separación silábica consiste en partir una palabra larga en un punto adecuado e insertar un guion (-) al final de la línea, de modo que el texto rellene columnas estrechas de forma más uniforme en lugar de dejar grandes espacios en blanco o permitir que una palabra larga desborde su contenedor.
Esta página cubre los tres valores que acepta la propiedad (none, manual y auto), el papel del atributo lang, los caracteres de guion suave y guion duro que se pueden insertar manualmente, y la relación de hyphens con otras propiedades de ruptura de texto.
Por qué y cuándo usar hyphens
La separación silábica es más relevante en contenedores estrechos — barras laterales, diseños móviles, texto en varias columnas o cualquier elemento con un width reducido. Sin ella, una sola palabra no fragmentable (una URL larga, un nombre químico, un compuesto alemán) puede desbordar su caja o generar un margen derecho irregular con espacios en blanco incómodos. Activar hyphens: auto permite al navegador dividir esas palabras en puntos válidos y mantiene el texto justificado o estrecho con un aspecto cuidado.
Normalmente se usa hyphens junto con text-align: justify, o siempre que el contenido sea generado por el usuario y no sea posible predecir la longitud de las palabras.
hyphens: auto solo funciona cuando se conoce el idioma del elemento. Indícalo con el atributo lang (por ejemplo <html lang="en">), ya que el navegador necesita el diccionario de separación silábica del idioma para decidir dónde se permiten los cortes. Sin lang, auto se comporta como manual.
Las reglas de separación silábica no están definidas de forma explícita en la especificación, por lo que los puntos de corte exactos pueden variar de un navegador a otro.
| Valor inicial | none |
|---|---|
| Se aplica a | Todos los elementos. |
| Heredado | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | Object.style.hyphens = "none"; |
Sintaxis
Sintaxis de la propiedad CSS hyphens
hyphens: none | manual | auto | initial | inherit;Ejemplo de la propiedad hyphens:
Ejemplo de la propiedad CSS hyphens con los valores none, manual y auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 55px;
border: 1px solid #666;
}
p.none {
hyphens: none;
}
p.manual {
hyphens: manual;
}
p.auto {
hyphens: auto;
}
</style>
</head>
<body>
<h2>Hyphens property example</h2>
<h3>none</h3>
<p class="none">An extreme­ly lengthy sentence</p>
<h3>manual</h3>
<p class="manual">An extreme­ly lengthy sentence</p>
<h3>auto</h3>
<p class="auto" lang="en">An extreme­ly lengthy sentence</p>
</body>
</html>Resultado
En el ejemplo anterior se incluyen los tres valores para poder apreciar las diferencias.
Los prefijos de navegador ya no son necesarios para los navegadores modernos.
Oportunidades de salto de línea
Con la ayuda de los dos caracteres Unicode que se muestran a continuación, podemos definir manualmente posibles puntos de salto de línea dentro del texto:
U+00AD (SHY / Guion suave)
Este carácter se representa de forma invisible. Indica el lugar donde el navegador debe dividir la palabra en caso de que se necesite separación silábica. Para insertar SHY usa .
U+2010 (HYPHEN / Guion duro)
Este carácter indica una posible ruptura de línea visible. El guion se muestra incluso cuando la línea no se rompe en ese punto.
Valores
| Valor | Descripción |
|---|---|
| none | Sin separación silábica. Las palabras no se dividen en los saltos de línea, aunque los caracteres sugieran puntos de ruptura. |
| manual | Las palabras solo se dividen para el ajuste de línea donde existen oportunidades de ruptura dentro de la palabra. Las palabras solo se separan con ‐ o ­. |
| auto | El navegador divide automáticamente las palabras en puntos de separación silábica adecuados. Las palabras se separan donde el algoritmo lo decide. El comportamiento del valor auto depende del idioma. |
| initial | Hace que la propiedad use su valor predeterminado. |
| inherit | Hereda la propiedad de su elemento padre. |
Propiedades relacionadas con la ruptura de texto
hyphens es una de las varias propiedades CSS que determinan dónde y cómo puede ajustarse el texto. Frecuentemente se combinan:
- overflow-wrap — permite al navegador dividir una palabra larga solo cuando de lo contrario desbordaría su contenedor, sin insertar un guion.
- word-break — controla si las palabras pueden romperse entre cualquier par de caracteres (útil para texto CJK o cadenas largas).
- word-wrap — el alias heredado de
overflow-wrap. - white-space — determina si las secuencias de espacios en blanco se contraen y si el texto se ajusta en absoluto.
- line-break — ajusta las reglas de ruptura de línea, principalmente para idiomas asiáticos.
Usa hyphens para añadir guiones en los puntos de ruptura válidos, y overflow-wrap / word-break como red de seguridad para cadenas que no tienen un punto de separación silábica válido.
Soporte de navegadores
hyphens: auto es compatible con todos los navegadores modernos. Las versiones anteriores de Safari y Edge preChromium requerían prefijos de proveedor (-webkit-hyphens, -ms-hyphens), pero ya no son necesarios para los navegadores actuales.