Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte parcial 55
Notas
Soporte parcial 55
Notas
Notas auto value is only supported on macOS and Android.
Soporte completo 13
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -webkit-
Notas Only -webkit-hyphens: none is supported.
Edge Soporte completo 12
Prefijado Notas
Soporte completo 12
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -ms-
Notas Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Internet Explorer.
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 completo 10
Prefijado Notas
Soporte completo 10
Prefijado Notas
Prefijado Requiere de un prefijo de vendedor : -ms-
Notas Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Internet Explorer.
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 Si
Prefijado
Prefijado Requiere de un prefijo de vendedor : -webkit-
Edge Mobile ? 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 44Safari 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 ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Bulgarian (bg, bg-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Catalan (ca, ca-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Croatian (hr, hr-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Czech (cs, cs-*)Chrome ? Edge ? Firefox Sin soporte NoIE Soporte completo 10Opera ? Safari Soporte completo 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Esperanto (eo, eo-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Estonian (et, et-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Danish (da, da-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Dutch (nl, nl-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Finnish (fi, fi-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for French (fr, fr-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Galician (gl, gl-*)Chrome ? Edge ? Firefox Soporte completo 9IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901)Chrome ? Edge ? Firefox Soporte completo 8IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*)Chrome ? Edge ? Firefox Soporte completo 8IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Hungarian (hu, hu-*)Chrome ? Edge ? Firefox Soporte completo 9IE Sin soporte NoOpera ? Safari Soporte completo 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Icelandic (is, is-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Interlingua (ia, ia-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Italian (it, it-*)Chrome ? Edge ? Firefox Soporte completo 9IE Soporte completo 10Opera ? Safari Soporte completo 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Kurmanji (kmr, kmr-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Latin (la, la-*)Chrome Soporte completo SiEdge ? Firefox Soporte completo 8IE Sin soporte NoOpera Soporte completo 44Safari Sin soporte NoWebView Android Soporte completo SiChrome Android Soporte completo SiEdge Mobile ? Firefox Android ? Opera Android Soporte completo 44Safari iOS ? Samsung Internet Android Soporte completo Si
Hyphenation dictionary for Lithuanian (lt, lt-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Mongolian (mn, mn-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Polish (pl, pl-*)Chrome ? Edge ? Firefox Soporte completo 31IE Soporte completo 10Opera ? Safari Soporte completo 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Portuguese (pt, pt-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Brazilian Portuguese (pt-BR)Chrome ? Edge ? Firefox Soporte completo 8
Notas
Soporte completo 8
Notas
Notas For Brazilian Portuguese, Firefox uses a Portuguese dictionary.
IE Soporte completo 10Opera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Russian (ru, ru-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Slovenian (sl, sl-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Spanish (es, es-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Swedish (sv, sv-*)Chrome ? Edge ? Firefox Soporte completo 8IE Soporte completo 10Opera ? Safari Soporte completo 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Turkish (tr, tr-*)Chrome ? Edge ? Firefox Soporte completo 9IE Soporte completo 10Opera ? Safari Soporte completo 5.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Ukrainian (uk, uk-*)Chrome ? Edge ? Firefox Soporte completo 9IE Sin soporte NoOpera ? Safari Soporte completo 9.1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for Welsh (cy, cy-*)Chrome ? Edge ? Firefox Soporte completo 8IE Sin soporte NoOpera ? Safari Sin soporte NoWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Hyphenation dictionary for English (en, en-*)Chrome Soporte completo 55Edge ? Firefox 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 55Edge Mobile ? Firefox Android ? Opera Android Soporte completo 44Safari iOS ? Samsung Internet Android Soporte completo 6.0

Leyenda

Soporte completo  
Soporte completo
Soporte parcial  
Soporte parcial
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown
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

Etiquetas y colaboradores del documento

Colaboradores en esta página: AntonioNavajasOjeda
Última actualización por: AntonioNavajasOjeda,