hyphens

La propiedad CSS hyphens especifica cómo las palabras deben dividirse cuando el texto se ajusta a través de múltiples líneas. Puede prevenir la separación de sílabas por completo, usar guiones manualmente en puntos específicos del texto, o dejar que el navegador inserte los guiones automáticamente donde corresponda.
 

Las reglas de separación silábica son específicas del idioma. En HTML, el idioma es determinado por el atributo lang, y los navegadores separarán únicamente si este atributo está presente y si existe un dicionario de separación silábica adecuado. En XML, debe usarse el atributo xml:lang.

Nota: Las reglas que definen cómo se realiza la separación de sílabas no están explícitamente definidos por la especificación, por lo que esta puede variar de un navegador a otro.

Sintaxis

/* Keyword values */
hyphens: none;
hyphens: manual;
hyphens: auto;

/* Global values */
hyphens: inherit;
hyphens: initial;
hyphens: unset;

La propiedad hyphens se especifica con una única palabra de la lista a continuación.

Valores

none
Las palabras no se separan en los finales de línea, incluso si las letras dentro de las palabras sobrepasan el final de la línea.  Las líneas solo se distribuyen en el espacio en blanco.
manual
Las palabras se separan para el ajuste de línea sólo cuando los caracteres dentro de la palabra sugieren oportunidades de salto de línea. Ver Sugiriendo oportunidades de separación de línea más abajo para detalle.
auto
El navegador es libre de separar palabras en puntos de separación apropiados, siguiendo cualquiera de las reglas elegidas. Sin embargo, las oportunidades de separación de línea (ver Sugiriendo oportunidades de separación de línea más abajo) anularán la separación automática cuando exista.

Nota: El comportamiento del valor auto dependerá de que el idioma esté bien etiquetado de manera que las reglas de separación silábica puedan ser seleccionadas. Se debe especificar el idioma con el atributo lang de HTML de cara a garantizar que la separación silábica se aplique en el idioma de tu elección.

Sintaxis formal

none | manual | auto

Sugiriendo oportunidades de separación de línea

Hay dos caracteres Unicode que pueden ser usados manualmente para especificar un potencial punto de separación de línea dentro del texto:

U+2010 (HYPHEN)
El carácter "fuerte" de separación de línea indica una oportunidad de separación visible. Incluso si la línea no está realmente separada en ese momento, se muestra el guión.
U+00AD (SHY)
Un carácter invisible y "suave" de separación de línea. Este carácter no se renderiza de manera visible; en lugar de ello, indica la posición en la que el navegador debería separar la palabra en caso de requerir separación de línea. En HTML, puedes usar ­ para insertar una separación "suave".

Ejemplo

Este ejemplo usa tres clases, una por cada posible configuración de la propiedad hyphens.

HTML

<ul>
  <li><code>none</code>: sin separación; se desbordará si es preciso
    <p lang="es" class="none">Una extrema&shy;damente larga palabra</p>
  </li>  
  <li><code>manual</code>: separación sólo en &amp;hyphen; o &amp;shy; (si fuera necesario)
    <p lang="es" class="manual">Una extrema&shy;damente larga palabra</p>
  </li>
  <li><code>auto</code>: separará donde decida el algoritmo (si fuera necesario)
    <p lang="enes class="auto">Una extrema&shy;damente larga palabra</p>
  </li>
</ul>

CSS

p { 
  width: 55px;
  border: 1px solid black;
 }
p.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
p.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
p.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Resultado

Especificaciones

Especificación Estado Comentario
CSS Text Module Level 3
La definición de 'hyphens' en esta especificación.
Working Draft Initial definition
Valor inicialmanual
Applies toall elements
Heredableyes
Mediavisual
Valor calculadocomo se especifica
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Compatibilidad de navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
hyphensChrome Soporte parcial 55
Notas
Soporte parcial 55
Notas
Notas auto value is only supported on macOS and Android and for languages the OS provides hyphenation for.
Soporte completo 13
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -webkit-
Notas Only -webkit-hyphens: none is supported.
Edge Soporte parcial 12
Prefijado Notas
Soporte parcial 12
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -ms-
Notas Only works if the specified language is the same as the language of the underlying OS.
Firefox Soporte completo 43
Soporte completo 43
Soporte completo 6
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -moz-
Notas Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.
IE Soporte parcial 10
Prefijado Notas
Soporte parcial 10
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -ms-
Notas Only works if the specified language is the same as the language of the underlying OS.
Opera Soporte parcial 44
Notas
Soporte parcial 44
Notas
Notas auto value is only supported on macOS and Android.
Safari Soporte completo 5.1
Prefijado
Soporte completo 5.1
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
WebView Android Soporte completo 55
Soporte completo 55
Soporte completo 4
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Chrome Android Soporte completo 55
Soporte completo 55
Soporte completo 18
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Firefox Android Soporte completo 43
Soporte completo 43
Soporte completo 6
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -moz-
Notas Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.
Opera Android Soporte completo 43Safari iOS Soporte completo 4.2
Prefijado
Soporte completo 4.2
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Samsung Internet Android Soporte completo 6.0
Hyphenation dictionary for Afrikaans (af, af-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Bulgarian (bg, bg-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Catalan (ca, ca-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 5.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for Croatian (hr, hr-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 9.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 9.1Samsung Internet Android Sin soporte No
Hyphenation dictionary for Czech (cs, cs-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 9.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Sin soporte NoOpera Android Sin soporte NoSafari iOS Soporte completo 9.1Samsung Internet Android Sin soporte No
Hyphenation dictionary for Danish (da, da-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 5.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for Dutch (nl, nl-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 5.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for English (en, en-*)Chrome Soporte completo 55Edge Soporte completo 12Firefox Soporte completo 6
Notas
Soporte completo 6
Notas
Notas For English, Firefox uses an en-US dictionary
IE Soporte completo 10Opera Soporte completo 44Safari Soporte completo 5.1
Notas
Soporte completo 5.1
Notas
Notas For English, Safari uses different en-GB and en-US dictionaries.
WebView Android Soporte completo 55Chrome Android Soporte completo 55Firefox Android Soporte completo 6
Notas
Soporte completo 6
Notas
Notas For English, Firefox uses an en-US dictionary
Opera Android Soporte completo 43Safari iOS Soporte completo 6
Notas
Soporte completo 6
Notas
Notas For English, Safari uses different en-GB and en-US dictionaries.
Samsung Internet Android Soporte completo 6.0
Hyphenation dictionary for Esperanto (eo, eo-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Estonian (et, et-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Finnish (fi, fi-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 9.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 9.1Samsung Internet Android Sin soporte No
Hyphenation dictionary for French (fr, fr-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 5.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for Galician (gl, gl-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 9IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 9Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 5.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Hungarian (hu, hu-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 9IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 9.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 9Opera Android Sin soporte NoSafari iOS Soporte completo 9.1Samsung Internet Android Sin soporte No
Hyphenation dictionary for Icelandic (is, is-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Interlingua (ia, ia-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Italian (it, it-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 9IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 5.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 9Opera Android Sin soporte NoSafari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for Kurmanji (kmr, kmr-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Latin (la, la-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Lithuanian (lt, lt-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Mongolian (mn, mn-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera ? Safari Soporte completo 5.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android ? Safari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for Polish (pl, pl-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 31IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 9.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 31Opera Android Sin soporte NoSafari iOS Soporte completo 9.1Samsung Internet Android Sin soporte No
Hyphenation dictionary for Portuguese (pt, pt-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 9.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 9.1Samsung Internet Android Sin soporte No
Hyphenation dictionary for Brazilian Portuguese (pt-BR)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8
Notas
Soporte completo 8
Notas
Notas For Brazilian Portuguese, Firefox uses a Portuguese dictionary.
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8
Notas
Soporte completo 8
Notas
Notas For Brazilian Portuguese, Firefox uses a Portuguese dictionary.
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Russian (ru, ru-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 5.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for Slovenian (sl, sl-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Spanish (es, es-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 5.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for Swedish (sv, sv-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 5.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for Turkish (tr, tr-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 9IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 5.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 9Opera Android Sin soporte NoSafari iOS Soporte completo 5Samsung Internet Android Sin soporte No
Hyphenation dictionary for Ukrainian (uk, uk-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 9IE Sin soporte NoOpera Sin soporte NoSafari Soporte completo 9.1WebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 9Opera Android Sin soporte NoSafari iOS Soporte completo 9.1Samsung Internet Android Sin soporte No
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
Hyphenation dictionary for Welsh (cy, cy-*)Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 8IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 8Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Soporte parcial  
Soporte parcial
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Ver notas de implementación.
Ver notas de implementación.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Ver también