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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Soporte básico

55

13 -webkit- 1

?

43

6 -moz- 2

10 -ms- 3445.1 -webkit-
Hyphenation dictionary for Afrikaans (af, af-*) ? ?8 No ? No
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*) ? ?8 No ? No
Hyphenation dictionary for Bulgarian (bg, bg-*) ? ?8 No ? No
Hyphenation dictionary for Catalan (ca, ca-*) ? ?810 ?5.1
Hyphenation dictionary for Croatian (hr, hr-*) ? ?810 ?9.1
Hyphenation dictionary for Czech (cs, cs-*) ? ? No10 ?9.1
Hyphenation dictionary for Esperanto (eo, eo-*) ? ?8 No ? No
Hyphenation dictionary for Estonian (et, et-*) ? ?8 No ? No
Hyphenation dictionary for Danish (da, da-*) ? ?810 ?5.1
Hyphenation dictionary for Dutch (nl, nl-*) ? ?810 ?5.1
Hyphenation dictionary for Finnish (fi, fi-*) ? ?810 ?9.1
Hyphenation dictionary for French (fr, fr-*) ? ?810 ?5.1
Hyphenation dictionary for Galician (gl, gl-*) ? ?9 No ? No
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*) ? ?810 ?5.1
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901) ? ?8 ? ? ?
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*) ? ?8 ? ? ?
Hyphenation dictionary for Hungarian (hu, hu-*) ? ?9 No ?9.1
Hyphenation dictionary for Icelandic (is, is-*) ? ?8 No ? No
Hyphenation dictionary for Interlingua (ia, ia-*) ? ?8 No ? No
Hyphenation dictionary for Italian (it, it-*) ? ?910 ?5.1
Hyphenation dictionary for Kurmanji (kmr, kmr-*) ? ?8 No ? No
Hyphenation dictionary for Latin (la, la-*) Si ?8 No44 No
Hyphenation dictionary for Lithuanian (lt, lt-*) ? ?8 No ? No
Hyphenation dictionary for Mongolian (mn, mn-*) ? ?8 No ? No
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*) ? ?810 ?5.1
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*) ? ?810 ? No
Hyphenation dictionary for Polish (pl, pl-*) ? ?3110 ?9.1
Hyphenation dictionary for Portuguese (pt, pt-*) ? ?810 ?9.1
Hyphenation dictionary for Brazilian Portuguese (pt-BR) ? ?8410 ? No
Hyphenation dictionary for Russian (ru, ru-*) ? ?810 ?5.1
Hyphenation dictionary for Slovenian (sl, sl-*) ? ?8 No ? No
Hyphenation dictionary for Spanish (es, es-*) ? ?810 ?5.1
Hyphenation dictionary for Swedish (sv, sv-*) ? ?810 ?5.1
Hyphenation dictionary for Turkish (tr, tr-*) ? ?910 ?5.1
Hyphenation dictionary for Ukrainian (uk, uk-*) ? ?9 No ?9.1
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*) ? ?8 No ? No
Hyphenation dictionary for Welsh (cy, cy-*) ? ?8 No ? No
Hyphenation dictionary for English (en, en-*)55 ?6510445.16
FeatureAndroid webviewChrome para AndroidEdge mobileFirefox para AndroidOpera AndroidiOS SafariSamsung Internet
Soporte básico

55

4 -webkit-

55 ?

43

6 -moz- 2

444.2 -webkit- 6.0
Hyphenation dictionary for Afrikaans (af, af-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Bosnian, Serbian, and Serbo-Croatian (sh, sh-*, sr, sr-*, bs, bs-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Bulgarian (bg, bg-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Catalan (ca, ca-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Croatian (hr, hr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Czech (cs, cs-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Esperanto (eo, eo-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Estonian (et, et-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Danish (da, da-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Dutch (nl, nl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Finnish (fi, fi-*) ? ? ? ? ? ? ?
Hyphenation dictionary for French (fr, fr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Galician (gl, gl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for German, Reformed Orthography of 1996 (de, de-1996, de-DE, de-AT, de-*) ? ? ? ? ? ? ?
Hyphenation dictionary for German, Traditional Orthography of 1901 (de-1901, de-AT-1901, de-DE-1901) ? ? ? ? ? ? ?
Hyphenation dictionary for German, Swiss Orthography (de-CH, de-CH-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Hungarian (hu, hu-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Icelandic (is, is-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Interlingua (ia, ia-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Italian (it, it-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Kurmanji (kmr, kmr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Latin (la, la-*) Si Si ? ?44 ? Si
Hyphenation dictionary for Lithuanian (lt, lt-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Mongolian (mn, mn-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Norwegian (Bokmål) (no, no-*, nb, nb-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Norwegian (Nynorsk) (nn, nn-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Polish (pl, pl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Portuguese (pt, pt-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Brazilian Portuguese (pt-BR) ? ? ? ? ? ? ?
Hyphenation dictionary for Russian (ru, ru-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Slovenian (sl, sl-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Spanish (es, es-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Swedish (sv, sv-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Turkish (tr, tr-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Ukrainian (uk, uk-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Upper Sorbian (hsb, hsb-*) ? ? ? ? ? ? ?
Hyphenation dictionary for Welsh (cy, cy-*) ? ? ? ? ? ? ?
Hyphenation dictionary for English (en, en-*)5555 ? ?44 ?6.0

1. Only -webkit-hyphens: none is supported.

2. Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Firefox.

3. Automatic hyphenation only works for languages with hyphenation dictionaries that are integrated into Internet Explorer.

4. For Brazilian Portuguese, Firefox uses a Portuguese dictionary.

5. For English, Firefox uses an en-US dictionary

6. For English, Safari uses different en-GB and en-US dictionaries.

Ver también

Etiquetas y colaboradores del documento

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